:root{--blue:#0b4fc7;--navy:#071a36;--ink:#101828;--muted:#667085;--line:#e8edf5;--soft:#f4f7fb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#f3f6fa;color:var(--ink)}button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 10%,#e7f0ff,transparent 28%),linear-gradient(140deg,#f7faff,#eef4fc)}.login-card{width:min(450px,100%);background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:0 30px 70px rgba(27,58,102,.12)}.login-card img{height:70px;margin-bottom:20px}.login-card h1{font-size:30px;margin:0 0 7px}.login-card p{color:var(--muted);font-size:14px}.field{display:grid;gap:7px;margin-top:15px}.field label{font-size:12px;font-weight:750}.field input,.field textarea{padding:13px 14px;border:1px solid #dce4ef;border-radius:13px;outline:0;background:#fbfdff}.field textarea{min-height:100px}.btn{border:0;border-radius:13px;padding:12px 15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.btn.primary{background:linear-gradient(135deg,#0b4fc7,#073883);color:#fff}.btn.soft{background:#edf4ff;color:#0b4fc7;font-weight:600}.btn.danger{background:#fff0f0;color:#bf2020}.btn.full{width:100%;margin-top:18px}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:#071a36;color:#dbe7f8;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}.side-brand{background:#fff;border-radius:17px;padding:9px 12px;margin-bottom:22px}.side-brand img{height:50px;max-width:100%}.nav-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#6f8aa8;margin:18px 10px 8px}.side-nav{display:grid;gap:5px}.side-nav button{border:0;background:transparent;color:#bdcbe0;text-align:left;padding:11px 12px;border-radius:12px;display:flex;align-items:center;gap:10px;font-size:13px}.side-nav button:hover,.side-nav button.active{background:#0b326d;color:#fff}.side-nav i{width:25px;height:25px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-style:normal}.side-foot{margin-top:24px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}.side-foot a{display:block;color:#9eb3cf;text-decoration:none;padding:9px 10px;font-size:13px}.main{min-width:0}.top{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}.top h2{font-size:18px;margin:0}.top-actions{display:flex;gap:9px}.content{padding:24px;max-width:1460px;margin:auto}.panel{display:none}.panel.active{display:block}.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.page-head h1{font-size:29px;letter-spacing:-.03em;margin:0 0 4px}.page-head p{margin:0;color:var(--muted);font-size:13px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}.metric span{font-size:12px;color:var(--muted)}.metric strong{display:block;font-size:30px}.metric small{color:#209455}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}.card h3{font-size:15px;margin:0 0 4px}.sub{font-size:12px;color:var(--muted);margin:0 0 16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .field{margin:0}.full{grid-column:1/-1}.savebar{position:sticky;bottom:14px;margin-top:18px;display:flex;justify-content:flex-end;gap:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 14px 35px rgba(22,51,91,.08)}.upload-box{border:1px dashed #b8c8dc;background:#f8fbff;border-radius:16px;padding:16px;text-align:center}.preview-logo{height:78px;max-width:270px;object-fit:contain;margin:0 auto 10px}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.image-card{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#fff}.image-card img{height:145px;width:100%;object-fit:cover}.image-card .meta{padding:12px}.image-card .meta input,.image-card .meta textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:9px}.image-actions{display:flex;gap:6px;margin-top:8px}.small{padding:8px 10px;font-size:11px}.list{display:grid;gap:8px}.row{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#fff}.row strong{font-size:13px}.row small{display:block;color:var(--muted)}.tag{font-size:11px;padding:5px 8px;border-radius:999px;background:#edf4ff;color:#0b4fc7}.preview-frame{width:100%;height:310px;border:1px solid var(--line);border-radius:18px;background:#fff}.toast{position:fixed;right:22px;bottom:22px;background:#081d3d;color:#fff;padding:12px 15px;border-radius:12px;opacity:0;transform:translateY(8px);transition:.2s;z-index:99}.toast.show{opacity:1;transform:none}.mobile-toggle{display:none}
@media(max-width:1050px){.app{grid-template-columns:84px 1fr}.nav-title,.side-nav span,.side-foot{display:none}.side-nav button{justify-content:center}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.app{display:block}.sidebar{position:fixed;left:-260px;width:240px;z-index:50;transition:.2s}.sidebar.open{left:0}.mobile-toggle{display:inline-flex}.content{padding:14px}.cards,.grid-2,.form-grid,.image-grid{grid-template-columns:1fr}.full{grid-column:auto}.top-actions .desktop-only{display:none}}


/* --- Admin mobile refinement phase --- */
.sidebar-scrim{display:none}
@media(max-width:700px){
  body{background:#f5f7fb}
  .app{min-height:100dvh}
  .sidebar{
    width:min(286px,86vw);left:-300px;padding:14px 12px 18px;box-shadow:20px 0 60px rgba(5,20,45,.22);
    border-radius:0 22px 22px 0
  }
  .sidebar.open{left:0}
  .sidebar.open + .main{}
  .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(4,16,34,.45);z-index:45;opacity:0;pointer-events:none;transition:.2s}
  .sidebar.open~.sidebar-scrim{}
  .side-brand{margin-bottom:14px;border-radius:14px}.side-brand img{height:43px}
  .nav-title{display:block!important;font-size:9px;margin:15px 9px 7px}
  .side-nav span{display:inline!important}
  .side-nav button{justify-content:flex-start!important;padding:10px 11px;border-radius:11px}
  .side-nav i{width:31px;height:31px;flex:0 0 auto}
  .side-foot{display:block!important;margin-top:18px}
  .top{height:60px;padding:0 11px;gap:8px}
  .top h2{font-size:14px}
  .mobile-toggle{width:38px;height:38px;padding:0;border-radius:11px}
  .top-actions{gap:6px}
  .top-actions .btn.primary{padding:10px 11px;font-size:11px;border-radius:11px}
  .content{padding:12px 12px 82px}
  .page-head{margin-bottom:12px}
  .page-head h1{font-size:23px;line-height:1.08}
  .page-head p{font-size:11.5px;margin-top:5px}
  .cards{grid-template-columns:1fr 1fr;gap:8px}
  .metric{padding:13px;border-radius:15px}
  .metric span{font-size:10px}.metric strong{font-size:22px;margin-top:2px}.metric small{font-size:9.5px}
  .grid-2{gap:9px;margin-top:9px}
  .card{padding:14px;border-radius:17px}
  .card h3{font-size:13.5px}.sub{font-size:10.5px;margin-bottom:12px}
  .row{padding:10px;border-radius:12px}.row strong{font-size:11.5px}.row small{font-size:9.5px}.tag{font-size:9px}
  .form-grid{gap:9px}
  .field{margin-top:10px;gap:5px}.field label{font-size:10.5px}
  .field input,.field textarea{padding:11px 12px;border-radius:11px;font-size:12px}
  .upload-box{padding:13px;border-radius:14px}.preview-logo{height:61px}
  .image-grid{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;margin-right:-12px;padding-right:12px;
    scrollbar-width:none
  }
  .image-grid::-webkit-scrollbar{display:none}
  .image-card{flex:0 0 78vw;max-width:292px;scroll-snap-align:start;border-radius:15px}
  .image-card img{height:155px}
  .image-card .meta{padding:10px}
  .image-actions{flex-wrap:wrap}
  .preview-frame{height:260px;border-radius:14px}
  .savebar{
    position:fixed;left:10px;right:10px;bottom:9px;z-index:30;margin:0;padding:7px;border-radius:15px;
    display:grid;grid-template-columns:.8fr 1.2fr;box-shadow:0 16px 45px rgba(15,41,79,.17)
  }
  .savebar .btn{min-height:42px;padding:9px;font-size:10.5px;border-radius:11px}
  .login{padding:14px;align-items:center}
  .login-card{padding:23px;border-radius:22px}.login-card img{height:58px}.login-card h1{font-size:25px}
}
@media(max-width:390px){
  .cards{grid-template-columns:1fr}
  .metric{display:grid;grid-template-columns:1fr auto;align-items:center}.metric small{grid-column:1/-1}
}


/* =========================================================
   FINAL ADMIN MOBILE ALIGNMENT
   ========================================================= */
@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  .main,.content,.panel,.card,.grid-2,.form-grid{min-width:0;max-width:100%}
  .top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    width:100%!important;
    min-width:0!important;
    gap:7px!important
  }
  .top>div:first-child{min-width:0;overflow:hidden}
  .top h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions{min-width:0}
  .top-actions .btn.primary{
    width:auto!important;
    max-width:112px!important;
    min-width:0!important;
    white-space:nowrap!important
  }

  .page-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:10px!important
  }
  .page-head>.btn{
    width:100%!important;
    max-width:100%!important;
    margin:0!important
  }

  .cards,.grid-2,.form-grid{
    width:100%!important;
    max-width:100%!important
  }
  .card,.metric,.row{min-width:0!important}
  .field,.field.full{width:100%!important;min-width:0!important}
  .field input,.field textarea,.field select{
    width:100%!important;max-width:100%!important;min-width:0!important
  }

  .image-grid{
    width:calc(100% + 12px)!important;
    max-width:calc(100% + 12px)!important;
    margin-left:0!important;
    margin-right:-12px!important
  }
  .image-card{
    flex:0 0 min(286px,80vw)!important;
    min-width:0!important;
    max-width:min(286px,80vw)!important
  }
  .image-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important
  }
  .image-actions .btn,.image-actions label{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    text-align:center!important
  }

  .savebar{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;
    gap:6px!important;
    left:9px!important;right:9px!important;width:auto!important
  }
  .savebar .btn{
    width:100%!important;min-width:0!important;max-width:100%!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }

  .login-card{width:100%!important;max-width:430px!important}
  .login-card .btn{width:100%!important}
}
@media(max-width:380px){
  .top-actions .btn.primary{max-width:98px!important;font-size:10px!important;padding-inline:8px!important}
  .image-actions{grid-template-columns:1fr!important}
  .savebar{grid-template-columns:1fr 1fr!important}
}


/* Clean stacked brand mark */
.side-brand{display:flex;align-items:center;justify-content:center;min-height:74px}
.side-brand img{height:66px!important;width:auto!important;max-width:104px!important;object-fit:contain!important}
.login-card>img{height:88px!important;width:auto!important;max-width:132px!important;object-fit:contain!important}
.preview-logo{height:110px!important;width:auto!important;max-width:170px!important;object-fit:contain!important}
@media(max-width:700px){
  .side-brand img{height:58px!important;max-width:92px!important}
  .login-card>img{height:78px!important;max-width:118px!important}
}


/* Compact Hasbun branding */
.side-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:58px!important;
  padding:7px 10px!important;
  overflow:hidden!important;
}
.side-brand img{
  width:auto!important;
  height:45px!important;
  max-width:190px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
@media(max-width:1050px) and (min-width:701px){
  .side-brand{
    justify-content:center!important;
    padding:7px 4px!important;
  }
  .side-brand img{
    height:34px!important;
    max-width:58px!important;
    object-fit:cover!important;
    object-position:left center!important;
  }
}
@media(max-width:700px){
  .side-brand img{
    height:42px!important;
    max-width:180px!important;
    object-fit:contain!important;
  }
}


/* Hasbun admin brand lockup: same system-logo arrangement */
.side-brand-lockup{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  min-height:58px!important;
  padding:5px 8px!important;
  background:#fff!important;
  border-radius:15px!important;
}
.side-brand-mark{
  width:46px;height:42px;flex:0 0 46px;
  background:url("images/hasbun-logo-authoritative-v2.png") no-repeat 50% 7%;
  background-size:108px auto;
  border-radius:9px
}
.side-brand-type{display:flex;flex-direction:column;line-height:.88}
.side-brand-type strong{font-size:18px;letter-spacing:-.04em;color:#0a49b5}
.side-brand-type span{font-size:12px;letter-spacing:.16em;color:#15377a;margin-top:4px}
@media(max-width:1050px) and (min-width:701px){
  .side-brand-lockup{justify-content:center!important;padding:5px!important}
  .side-brand-type{display:none!important}
}
@media(max-width:700px){
  .side-brand-type{display:flex!important}
}


/* Logo preview reliability */
.preview-logo{
  display:block!important;
  width:min(100%,280px)!important;
  height:92px!important;
  max-width:280px!important;
  margin:0 auto 12px!important;
  padding:8px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  border:1px solid #e5ebf3!important;
  border-radius:14px!important;
  box-shadow:0 8px 22px rgba(20,52,92,.06)!important;
}
.preview-logo.loaded{border-color:#b7cdf1!important}
@media(max-width:700px){
  .preview-logo{
    width:min(100%,240px)!important;
    height:78px!important;
    max-width:240px!important;
    padding:7px!important;
    border-radius:12px!important;
  }
}


/* Admin system branding: same emblem + text lockup */
.admin-brand{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:9px!important;min-height:58px!important;padding:6px 9px!important;background:#fff!important;
  border-radius:15px!important;overflow:hidden!important
}
.admin-brand-mark{width:44px;height:40px;flex:0 0 44px;display:grid;place-items:center}
.admin-brand-mark img{width:100%;height:100%;object-fit:contain!important}
.admin-brand-text{display:flex;flex-direction:column;line-height:.88}
.admin-brand-text strong{font-size:18px;color:#0a49b5;letter-spacing:-.04em}
.admin-brand-text span{font-size:11px;color:#183c7d;letter-spacing:.16em;margin-top:4px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.login-brand img{width:64px!important;height:58px!important;object-fit:contain!important;margin:0!important}
.login-brand span{display:flex;flex-direction:column;line-height:.88}
.login-brand strong{font-size:25px;color:#0a49b5}
.login-brand small{font-size:14px;letter-spacing:.18em;color:#183c7d;margin-top:5px}
@media(max-width:1050px) and (min-width:701px){
  .admin-brand{justify-content:center!important;padding:6px!important}
  .admin-brand-text{display:none!important}
}

/* Final admin branding — exact attached logo only */
.hasbun-final-admin-brand{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:9px!important;min-height:58px!important;padding:6px 9px!important;
  background:#fff!important;border-radius:15px!important;overflow:hidden!important
}
.hasbun-final-admin-image{width:48px;height:44px;flex:0 0 48px;display:grid;place-items:center;overflow:hidden;border-radius:8px}
.hasbun-final-admin-image img{width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important}
.hasbun-final-admin-text{display:flex;flex-direction:column;line-height:.88}
.hasbun-final-admin-text strong{font-size:18px;color:#0b49ae;letter-spacing:-.04em}
.hasbun-final-admin-text span{font-size:11px;color:#183b7b;letter-spacing:.16em;margin-top:4px}
@media(max-width:1050px) and (min-width:701px){.hasbun-final-admin-text{display:none!important}}

/* FINAL CANONICAL HASBUN ADMIN BRAND */
.hasbun-final-admin-brand{display:flex!important;align-items:center!important;gap:9px!important;min-height:58px!important;padding:6px 9px!important;background:#fff!important;border-radius:15px!important;overflow:hidden!important}
.hasbun-final-admin-image{width:48px;height:44px;flex:0 0 48px;display:grid;place-items:center;overflow:hidden}
.hasbun-final-admin-image img{width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important}
.hasbun-final-admin-text{display:flex;flex-direction:column;line-height:.88}
.hasbun-final-admin-text strong{font-size:18px;color:#0b49ae}.hasbun-final-admin-text span{font-size:11px;color:#183b7b;letter-spacing:.16em;margin-top:4px}


/* Admin header: single logout control only */
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.icon-logout{
  width:40px;height:40px;min-width:40px;border:1px solid #e2e8f0;border-radius:12px;
  background:#fff;color:#17345c;display:grid;place-items:center;padding:0;
  transition:.18s ease;box-shadow:0 6px 16px rgba(19,52,92,.05)
}
.icon-logout svg{width:19px;height:19px;fill:currentColor}
.icon-logout:hover{background:#eef4ff;color:#0b4fc7;transform:translateY(-1px)}
@media(max-width:700px){
  .icon-logout{width:38px;height:38px;min-width:38px;border-radius:11px}
  .icon-logout svg{width:18px;height:18px}
}


/* Authoritative admin logo preview */
img#logoPreview.preview-logo{
  display:block!important;
  width:100%!important;
  max-width:300px!important;
  height:110px!important;
  margin:0 auto 12px!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  border:1px solid #e2eaf4!important;
  border-radius:14px!important;
}
@media(max-width:700px){
  img#logoPreview.preview-logo{max-width:250px!important;height:92px!important}
}

/* Content expansion admin */
.editor-stack{display:grid;gap:10px}.editor-row{display:grid;grid-template-columns:1fr auto;gap:12px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:13px}.editor-main{display:grid;grid-template-columns:1fr 1fr;gap:8px}.editor-main textarea{grid-column:1/-1;min-height:82px}.editor-main input,.editor-main textarea{width:100%;padding:10px 11px;border:1px solid #dce4ef;border-radius:10px;background:#fbfdff}.editor-actions{display:flex;gap:5px;align-items:start}.toggle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.toggle-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fbfdff;cursor:pointer}.toggle-card span{display:grid}.toggle-card strong{font-size:12px}.toggle-card small{font-size:10px;color:var(--muted)}.toggle-card input{display:none}.toggle-card i{width:38px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;transition:.2s}.toggle-card i:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0002;transition:.2s}.toggle-card input:checked+i{background:#0b4fc7}.toggle-card input:checked+i:after{transform:translateX(16px)}
@media(max-width:700px){.editor-row{grid-template-columns:1fr}.editor-main{grid-template-columns:1fr}.editor-main textarea{grid-column:auto}.editor-actions{display:grid;grid-template-columns:repeat(3,1fr)}.toggle-grid{grid-template-columns:1fr}}

/* =========================================================
   FINAL ADMIN SIDEBAR BRAND LAYOUT
   Logo occupies a dedicated side; text aligns cleanly beside it.
   ========================================================= */
div.side-brand.hasbun-final-admin-brand{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:64px!important;
  padding:6px 10px 6px 6px!important;
  margin-bottom:18px!important;
  background:#fff!important;
  border-radius:16px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.22)!important;
}
div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-image{
  width:58px!important;
  height:52px!important;
  min-width:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border-radius:12px!important;
  background:#fff!important;
  border:1px solid #e5ebf3!important;
}
div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:11px!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
}
div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-text{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  line-height:.9!important;
  overflow:hidden!important;
}
div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-text strong{
  display:block!important;
  max-width:100%!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
  color:#0b49ae!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-text span{
  display:block!important;
  max-width:100%!important;
  margin-top:5px!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  color:#183b7b!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:1050px) and (min-width:701px){
  div.side-brand.hasbun-final-admin-brand{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    padding:6px!important;
    min-height:58px!important
  }
  div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-image{
    width:48px!important;height:44px!important;min-width:48px!important
  }
  div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-text{display:none!important}
}
@media(max-width:700px){
  div.side-brand.hasbun-final-admin-brand{
    grid-template-columns:54px minmax(0,1fr)!important;
    min-height:60px!important;
    padding:5px 9px 5px 5px!important
  }
  div.side-brand.hasbun-final-admin-brand .hasbun-final-admin-image{
    width:54px!important;height:48px!important;min-width:54px!important
  }
}

/* Final admin SVG icon language */
.admin-nav-icon{
  width:30px!important;height:30px!important;min-width:30px!important;
  display:grid!important;place-items:center!important;padding:6px!important;
  border-radius:9px!important;background:rgba(255,255,255,.08)!important;color:inherit!important
}
.admin-nav-icon svg{width:17px!important;height:17px!important}
.side-nav button.active .admin-nav-icon{background:rgba(255,255,255,.14)!important}
#logout{display:flex!important;align-items:center!important;gap:8px!important}
#logout .ui-icon{width:17px;height:17px}
.action-svg{width:15px;height:15px;display:grid;place-items:center}
.image-actions .btn,.editor-actions .btn{gap:5px!important}
.mobile-toggle .ui-icon{width:18px;height:18px}

.maps-settings-card{display:grid;gap:18px}.maps-status{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(15,23,42,.08);border-radius:13px;background:#f8fafc}.status-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8}.maps-status.connected .status-dot{background:#16a34a}.maps-status>div{display:grid;gap:2px}.maps-status small{font-size:10px;color:#64748b}.maps-settings-card .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.maps-settings-card .field{display:grid;gap:6px}.maps-settings-card .field.full{grid-column:1/-1}.maps-settings-card .field>span{font-size:11px;font-weight:700}.maps-settings-card .field>small{font-size:9px;color:#64748b}.map-admin-actions{display:flex;justify-content:flex-end;gap:8px}.admin-map-preview{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:#eef5ff}.admin-map-pin{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#0b4fc7;color:#fff}@media(max-width:700px){.maps-settings-card .field-grid{grid-template-columns:1fr}.maps-settings-card .field.full{grid-column:auto}}

/* ORIGINAL ADMIN SIDEBAR ICON STYLE RESTORED */
.side-nav button>i{
 width:30px!important;height:30px!important;min-width:30px!important;
 display:grid!important;place-items:center!important;border-radius:9px!important;
 font-style:normal!important;font-size:13px!important;line-height:1!important;
 padding:0!important;background:rgba(255,255,255,.08)!important;color:inherit!important
}
.side-nav button>i svg{display:none!important}
.side-nav button.active>i{background:rgba(255,255,255,.12)!important}

/* Modern admin sidebar icons — original size/layout retained */
.side-nav button>i{
  width:30px!important;height:30px!important;min-width:30px!important;
  display:grid!important;place-items:center!important;
  padding:6px!important;border-radius:9px!important;
  background:rgba(255,255,255,.08)!important;color:inherit!important;
  font-size:0!important;
}
.side-nav button>i svg{
  display:block!important;width:17px!important;height:17px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.side-nav button.active>i{
  background:rgba(255,255,255,.14)!important;
}

/* Admin routing / empty states */
.admin-empty-state{
  min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;border:1px dashed #d7e1ee;border-radius:18px;background:#fbfdff;color:#53657c
}
.admin-empty-state h3{margin:10px 0 4px;color:#17345c;font-size:15px}
.admin-empty-state p{margin:0;font-size:11px}
.admin-empty-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#eaf3ff;color:#0b4fc7}
.admin-empty-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Quote & Enquiry Inbox */
.request-page-head{align-items:center}
.request-head-actions{display:flex;gap:8px}
.request-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.request-metric{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px}
.request-metric span{display:block;font-size:9px;color:#718096;text-transform:uppercase;letter-spacing:.07em}
.request-metric strong{display:block;margin-top:5px;font-size:23px;color:#17345c}
.request-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 185px 165px;gap:8px;margin-bottom:12px}
.request-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dce4ef;border-radius:12px;padding:0 11px}
.request-search svg{width:17px;height:17px;fill:none;stroke:#6b7f99;stroke-width:1.8}
.request-search input{width:100%;border:0!important;box-shadow:none!important;padding:11px 0!important;background:transparent!important}
.request-toolbar select{border:1px solid #dce4ef;border-radius:12px;background:#fff;padding:10px 11px;color:#334e70;font-size:11px}
.request-list{display:grid;gap:9px}
.request-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px}
.request-card-top,.request-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.request-type{padding:5px 8px;border-radius:999px;background:#eaf3ff;color:#0b4fc7;font-size:9px;font-weight:800;text-transform:uppercase}
.request-type.email{background:#f1ecff;color:#6941c6}.request-type.enquiry{background:#ecfdf3;color:#067647}
.request-time{font-size:9px;color:#8795a8}
.request-card-main{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:13px 0}
.request-person{display:grid;align-content:start;gap:3px}.request-person strong{font-size:12px;color:#17345c}.request-person span{font-size:10px;color:#667085}
.request-summary{display:grid;gap:3px}.request-summary b{font-size:11px}.request-summary span{font-size:10px;color:#667085}.request-summary p{font-size:10.5px;color:#53657c;margin:4px 0 0;line-height:1.5}
.request-card-bottom{padding-top:10px;border-top:1px solid #edf1f5}
.request-card-bottom select{min-width:132px;border:1px solid #dce4ef;border-radius:10px;padding:8px 9px;background:#fbfdff;font-size:10px}
.request-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Ensure Google Maps panel behaves like every other panel */
#maps.panel{width:100%}
#maps .maps-settings-card{margin-top:0}

@media(max-width:800px){
  .request-metrics{grid-template-columns:1fr 1fr}
  .request-toolbar{grid-template-columns:1fr 1fr}.request-search{grid-column:1/-1}
  .request-card-main{grid-template-columns:1fr;gap:8px}
}
@media(max-width:700px){
  .request-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .request-head-actions .btn{width:100%}
  .request-toolbar{grid-template-columns:1fr}
  .request-search{grid-column:auto}
  .request-card-bottom{align-items:stretch;flex-direction:column}
  .request-card-bottom select{width:100%}
  .request-actions{display:grid;grid-template-columns:repeat(3,1fr)}
  .request-actions .btn{width:100%;min-width:0;padding-inline:6px}
}

/* Production & Security */
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.security-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0}
.security-card-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.security-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:#eaf3ff;color:#0b4fc7;padding:9px}
.security-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.security-card-head>div{display:grid;gap:2px}.security-card-head strong{font-size:12px;color:#17345c}.security-card-head small{font-size:9.5px;color:#718096}
.security-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.security-fields label{display:grid;gap:5px}.security-fields label>span{font-size:10px;font-weight:700;color:#4b5f78}
.security-fields input{width:100%;padding:10px 11px;border:1px solid #dce4ef;border-radius:10px;background:#fbfdff}
.input-unit{display:grid;grid-template-columns:1fr 38px;border:1px solid #dce4ef;border-radius:10px;background:#fbfdff;overflow:hidden}.input-unit input{border:0!important;border-radius:0!important}.input-unit i{display:grid;place-items:center;font-style:normal;font-size:9px;color:#718096;border-left:1px solid #e6ebf2}
.security-save{margin-top:12px;width:100%}
.diagnostic-list{display:grid;gap:7px}.diagnostic-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid #e6ebf2;border-radius:11px;background:#fbfdff}.diagnostic-row span{display:flex;align-items:center;gap:7px;font-size:10px;color:#53657c}.diagnostic-row strong{font-size:10px;color:#17345c;text-align:right}.diag-dot{width:7px;height:7px;border-radius:50%;background:#f59e0b}.diag-dot.ok{background:#16a34a}.diag-dot.warn{background:#f59e0b}
.security-actions{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}.security-note{margin:10px 0 0;font-size:9px;color:#718096;line-height:1.5}
.audit-card{grid-column:1/-1}.audit-toolbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid #edf1f5}.audit-toolbar>span{font-size:10px;color:#718096}.audit-list{display:grid;max-height:340px;overflow:auto;scrollbar-width:none}.audit-list::-webkit-scrollbar{display:none}.audit-row{display:grid;grid-template-columns:8px 1fr auto;align-items:start;gap:9px;padding:11px 0;border-bottom:1px solid #edf1f5}.audit-mark{width:7px;height:7px;margin-top:4px;border-radius:50%;background:#0b4fc7}.audit-row>div{display:grid;gap:2px}.audit-row strong{font-size:10.5px;color:#17345c}.audit-row small{font-size:9px;color:#718096}.audit-row time{font-size:8.5px;color:#94a3b8}.audit-empty{padding:24px;text-align:center;font-size:10px;color:#718096}
@media(max-width:850px){.security-grid{grid-template-columns:1fr}.audit-card{grid-column:auto}}
@media(max-width:700px){.security-fields{grid-template-columns:1fr}.security-actions{display:grid;grid-template-columns:1fr}.security-actions .btn{width:100%}.audit-row{grid-template-columns:8px 1fr}.audit-row time{grid-column:2}}

/* Final admin QA polish */
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(11,79,199,.24)!important;outline-offset:2px!important
}
.qa-card{min-width:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.admin-profile-thumb{width:34px;height:34px;flex:0 0 34px;padding:2px;border:1px solid rgba(15,23,42,.1);border-radius:11px;background:#fff;overflow:hidden;cursor:pointer;display:grid;place-items:center}
.admin-profile-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}.admin-profile-thumb:hover{border-color:rgba(11,79,199,.28);box-shadow:0 5px 16px rgba(11,79,199,.1)}
.admin-profile-card{width:min(620px,calc(100% - 24px));padding:0;overflow:hidden}.admin-profile-card .modal-head{padding:15px 16px;border-bottom:1px solid #edf1f5}.admin-profile-card .modal-head h3{margin:0;font-size:15px;color:#17345c}.admin-profile-card .modal-head p{margin:3px 0 0;font-size:9.5px;color:#718096}
.admin-profile-card .modal-close{width:32px;height:32px;border:0;border-radius:10px;background:#f5f8fc;display:grid;place-items:center;cursor:pointer}.admin-profile-card .modal-close svg{width:16px;height:16px;fill:none;stroke:#17345c;stroke-width:1.8;stroke-linecap:round}
.admin-profile-body{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:18px}.admin-profile-preview-wrap{min-height:180px;border-radius:18px;background:linear-gradient(145deg,#eef5ff,#f8fbff);display:grid;place-items:center;align-content:center;gap:10px;border:1px solid #e3ebf5}
.admin-profile-preview-wrap img{width:112px;height:112px;object-fit:cover;border-radius:24px;background:#fff;border:4px solid #fff;box-shadow:0 10px 28px rgba(16,49,89,.12)}.admin-profile-preview-wrap span{font-size:10px;font-weight:800;color:#17345c}
.admin-profile-options{align-self:center}.admin-profile-options>strong{display:block;font-size:12px;color:#17345c;margin-bottom:5px}.admin-profile-options>p{font-size:10px;line-height:1.55;color:#718096;margin:0 0 13px}.admin-profile-actions{display:flex;gap:7px;flex-wrap:wrap}.admin-profile-actions .btn{display:inline-flex;align-items:center;gap:6px}
.profile-action-icon{width:15px;height:15px;display:inline-grid}.profile-action-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.admin-profile-note{display:block;margin-top:10px;font-size:8.5px;color:#94a3b8}
.admin-profile-footer{display:flex;justify-content:flex-end;gap:7px;padding:12px 16px;border-top:1px solid #edf1f5;background:#fbfdff}
@media(max-width:620px){.admin-profile-body{grid-template-columns:1fr;padding:14px}.admin-profile-preview-wrap{min-height:150px}.admin-profile-preview-wrap img{width:96px;height:96px}.admin-profile-actions{display:grid}.admin-profile-actions .btn{width:100%;justify-content:center}.admin-profile-footer{display:grid;grid-template-columns:1fr 1fr}}

/* Force admin dialogs above the full admin shell */
#adminProfileModal.modal,#shopProductModal.modal{
  position:fixed!important;inset:0!important;z-index:30000!important;width:100vw!important;height:100dvh!important;
  display:none!important;align-items:center!important;justify-content:center!important;padding:18px!important;
  background:rgba(9,25,48,.56)!important;backdrop-filter:blur(8px)
}
#adminProfileModal.modal.open,#shopProductModal.modal.open{display:flex!important}
#adminProfileModal .admin-profile-card,#shopProductModal .shop-product-admin-card{position:relative!important;z-index:30001!important;margin:auto!important;max-height:calc(100dvh - 36px)!important;overflow:auto!important}
.shop-admin-settings{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}.shop-admin-settings .card{margin:0}.shop-admin-settings label{display:grid;gap:6px;font-size:10px;font-weight:700;color:#4b5f78;margin-top:12px}.shop-admin-settings input{padding:10px 11px;border:1px solid #dce4ef;border-radius:10px}
.shop-admin-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.shop-admin-metrics>div{padding:12px;border:1px solid #e6ebf2;border-radius:12px;background:#fbfdff}.shop-admin-metrics span{display:block;font-size:9px;color:#718096}.shop-admin-metrics strong{display:block;margin-top:5px;font-size:16px;color:#17345c}
.shop-admin-products,.shop-admin-orders{display:grid;gap:8px}.shop-admin-product,.shop-admin-order{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #e6ebf2;border-radius:13px;background:#fff}.shop-admin-product img{width:54px;height:54px;object-fit:cover;border-radius:10px}.shop-admin-product>div:nth-child(2),.shop-admin-order>div{display:grid;gap:2px;min-width:0}.shop-admin-product>div:nth-child(2){flex:1}.shop-admin-product strong,.shop-admin-order strong{font-size:10.5px;color:#17345c}.shop-admin-product span,.shop-admin-order span{font-size:9px;color:#718096}.shop-admin-product small{font-size:8px;color:#0b7a48}.shop-admin-row-actions{display:flex!important;gap:6px}
.shop-admin-order{justify-content:space-between}.shop-admin-order>div:last-child{text-align:right}
.shop-product-admin-card{width:min(650px,calc(100% - 24px));padding:0}.shop-product-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}.shop-product-form-grid label{display:grid;gap:5px;font-size:10px;font-weight:700;color:#4b5f78}.shop-product-form-grid input,.shop-product-form-grid textarea{padding:10px;border:1px solid #dce4ef;border-radius:10px}.shop-product-form-grid .wide{grid-column:1/-1}.shop-active{grid-template-columns:auto 1fr!important;align-items:center;justify-content:start}.shop-active input{width:auto}
@media(max-width:700px){.shop-admin-settings{grid-template-columns:1fr}.shop-product-form-grid{grid-template-columns:1fr}.shop-product-form-grid .wide{grid-column:auto}.shop-admin-product{align-items:flex-start;flex-wrap:wrap}.shop-admin-row-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr!important}}


/* Requested soft-link and main Save button treatment */
a.btn.soft {
  border: 2px solid rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
  margin: 10px;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 6px;
  text-decoration: none;
}

button#saveBtn {
  border: 2px solid rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
  margin: 10px;
  padding: 10px 20px;
  display: inline-block;
  border-radius: 6px;
  text-decoration: none;
}


/* Save bar — transparent clean treatment */
.savebar {
  background-color: transparent;
  background: none transparent;
  box-shadow: none;
  backdrop-filter: none;
  border: 0px transparent;
  border-width: 0px;
  outline: none;
}

/* Menu Manager */
.menu-manager-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.menu-manager-guide{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 2px 13px;border-bottom:1px solid #edf1f5;margin-bottom:10px}
.menu-manager-guide>div{display:grid;gap:2px}.menu-manager-guide strong{font-size:11px;color:#17345c}.menu-manager-guide span{font-size:9px;color:#718096}
.menu-live-state{display:flex!important;align-items:center;gap:6px!important;padding:6px 8px;border-radius:999px;background:#ecfdf3;color:#067647!important;font-weight:700;white-space:nowrap}
.menu-live-state i{width:7px;height:7px;border-radius:50%;background:#12b76a}
.menu-editor-list{display:grid;gap:8px}
.menu-editor-row{display:grid;grid-template-columns:34px minmax(0,1fr) 94px auto;align-items:center;gap:10px;padding:10px;border:1px solid #e6ebf2;border-radius:14px;background:#fbfdff}
.menu-drag-index{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#eaf3ff;color:#0b4fc7;font-size:9px;font-weight:800}
.menu-editor-fields{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(160px,1.3fr);gap:8px;min-width:0}
.menu-editor-fields label{display:grid;gap:4px;min-width:0}.menu-editor-fields label>span{font-size:8px;font-weight:800;color:#718096;text-transform:uppercase;letter-spacing:.05em}
.menu-editor-fields input{width:100%;height:36px;min-width:0;padding:0 10px;border:1px solid #dfe7f0;border-radius:10px;background:#fff;color:#17345c;font-size:10px}
.menu-visibility-toggle{display:grid;grid-template-columns:35px 1fr;align-items:center;gap:7px;cursor:pointer}.menu-visibility-toggle input{display:none}.menu-visibility-toggle i{position:relative;width:35px;height:20px;border-radius:999px;background:#cbd5e1;transition:.18s}.menu-visibility-toggle i:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0002;transition:.18s}.menu-visibility-toggle input:checked+i{background:#0b4fc7}.menu-visibility-toggle input:checked+i:after{transform:translateX(15px)}.menu-visibility-toggle span{font-size:9px;font-weight:700;color:#53657c}
.menu-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px}.menu-icon-btn{width:34px!important;height:34px!important;padding:8px!important;margin:0!important}.menu-icon-btn svg,.menu-delete-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.menu-delete-btn{display:inline-flex!important;align-items:center!important;gap:5px!important;margin:0!important}
#menuItemModal.modal{position:fixed!important;inset:0!important;z-index:33000!important;width:100vw!important;height:100dvh!important;display:none!important;align-items:center!important;justify-content:center!important;padding:18px!important;background:rgba(8,24,46,.58)!important;backdrop-filter:blur(8px)}
#menuItemModal.modal.open{display:flex!important}.menu-item-card{width:min(560px,100%)!important;padding:0!important;margin:auto!important;border-radius:20px!important;overflow:hidden!important}.menu-item-card .modal-head{padding:15px 16px;border-bottom:1px solid #edf1f5}.menu-item-card .modal-head h3{margin:0;font-size:15px;color:#17345c}.menu-item-card .modal-head p{margin:3px 0 0;font-size:9.5px;color:#718096}
.menu-item-form{display:grid;gap:11px;padding:16px}.menu-item-form>label{display:grid;gap:5px}.menu-item-form>label>span,.menu-target-presets>span{font-size:9px;font-weight:800;color:#53657c}.menu-item-form input[type="text"],.menu-item-form input:not([type]){height:39px;padding:0 11px;border:1px solid #dfe7f0;border-radius:11px;background:#fff;color:#17345c}.menu-target-presets{display:grid;gap:7px}.menu-target-presets>div{display:flex;gap:5px;flex-wrap:wrap}.menu-target-presets button{border:1px solid #dbe5f1;border-radius:9px;background:#f8fbff;color:#315071;padding:7px 9px;font-size:8.5px;font-weight:700;cursor:pointer}.menu-target-presets button:hover{border-color:#9fc0ec;background:#eef5ff}.menu-check{grid-template-columns:auto 1fr!important;align-items:center!important;justify-content:start!important}.menu-check input{width:16px;height:16px}.menu-item-footer{display:flex;justify-content:flex-end;gap:7px;padding:12px 16px;border-top:1px solid #edf1f5;background:#fbfdff}
@media(max-width:820px){.menu-editor-row{grid-template-columns:30px minmax(0,1fr) 86px}.menu-editor-actions{grid-column:2/-1;justify-content:flex-start}.menu-editor-fields{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.menu-manager-head{align-items:stretch}.menu-manager-head .btn{width:100%}.menu-manager-guide{align-items:flex-start;flex-direction:column}.menu-editor-row{grid-template-columns:30px 1fr;align-items:start}.menu-editor-fields{grid-column:2;grid-template-columns:1fr}.menu-visibility-toggle{grid-column:2}.menu-editor-actions{grid-column:2;display:grid;grid-template-columns:36px 36px 1fr;width:100%}.menu-delete-btn{justify-content:center!important}.menu-item-footer{display:grid;grid-template-columns:1fr 1fr}.menu-item-footer .btn{width:100%}}

/* Phase 4 — Operations CRM / Media / Revisions */
.operations-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px}
.operations-metrics>div{padding:12px;border:1px solid #e5ebf2;border-radius:14px;background:#fff}.operations-metrics span{display:block;font-size:8.5px;color:#718096}.operations-metrics strong{display:block;margin-top:4px;font-size:19px;color:#17345c}
.operations-tabs{display:flex;gap:5px;margin-bottom:9px}.operations-tabs button{border:1px solid #dfe7f0;border-radius:9px;background:#fff;padding:8px 10px;font-size:9px;font-weight:800;color:#53657c}.operations-tabs button.active{background:#0b4fc7;color:#fff;border-color:#0b4fc7}
.operations-panel{display:none}.operations-panel.active{display:block}.operations-toolbar{display:grid;grid-template-columns:1fr 165px;gap:7px;margin-bottom:8px}.operations-toolbar input,.operations-toolbar select{height:38px;border:1px solid #dfe7f0;border-radius:10px;padding:0 10px;background:#fff;font-size:10px}
.operations-list{display:grid;gap:7px}.ops-row,.ops-payment{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid #e7edf4;border-radius:13px;background:#fff}.ops-row-main{display:grid;gap:2px;min-width:0}.ops-row-main strong{font-size:10.5px;color:#17345c}.ops-row-main small,.ops-row-main p{font-size:8.8px;color:#718096;margin:0}.ops-ref{font-size:8px;font-weight:800;color:#0b4fc7}.ops-row-side{display:flex;align-items:center;gap:6px}.ops-row-side select{height:34px;border:1px solid #dfe7f0;border-radius:9px;padding:0 8px;font-size:9px}.ops-payment>div{display:grid;gap:2px}.ops-payment strong{font-size:11px;color:#17345c}.ops-payment small{font-size:8px;color:#718096}.ops-status{padding:5px 8px;border-radius:999px;background:#ecfdf3;color:#067647;font-size:8px;font-weight:800}
.media-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.media-summary span{font-size:9px;color:#718096}.media-summary input{width:240px;max-width:100%;height:36px;border:1px solid #dfe7f0;border-radius:10px;padding:0 10px}
.media-library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.media-card{border:1px solid #e6ebf2;border-radius:14px;overflow:hidden;background:#fff}.media-card>img{width:100%;height:120px;object-fit:cover;background:#eef3f8}.media-card>div{padding:9px;display:grid;gap:4px}.media-card strong{font-size:9.5px;color:#17345c}.media-card small{font-size:8px;color:#718096}.media-card .btn{margin:3px 0 0!important;width:100%}
.revision-notice{padding:9px 11px;margin-bottom:9px;border-radius:11px;background:#eef5ff;color:#53657c;font-size:9px}.revision-list{display:grid;gap:7px}.revision-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border:1px solid #e7edf4;border-radius:12px;background:#fff}.revision-row>div{display:grid;gap:2px}.revision-row strong{font-size:10px;color:#17345c}.revision-row span,.revision-row small{font-size:8.5px;color:#718096}
@media(max-width:900px){.media-library-grid{grid-template-columns:repeat(3,1fr)}.operations-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.operations-toolbar{grid-template-columns:1fr}.ops-row{align-items:stretch;flex-direction:column}.ops-row-side{justify-content:space-between}.media-library-grid{grid-template-columns:1fr 1fr}.media-card>img{height:110px}.media-summary{align-items:stretch;flex-direction:column}.media-summary input{width:100%}}


/* Phase 5 — Publishing Control & Activity History */
.publishing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.publishing-status-card{display:grid;gap:4px}.publishing-status-card span{font-size:8.5px;color:#718096}.publishing-status-card strong{font-size:20px;color:#17345c}.publishing-status-card small{font-size:8px;color:#718096}.publishing-actions{margin-top:8px}.publish-check-result{margin-top:9px;font-size:9px;line-height:1.5}.check-ok{color:#067647;font-weight:800}.check-warn{color:#b54708;font-weight:800}.audit-list{display:grid;gap:6px}.audit-row{display:grid;grid-template-columns:10px 1fr;gap:9px;padding:10px 11px;border:1px solid #e7edf4;border-radius:12px;background:#fff}.audit-dot{width:8px;height:8px;border-radius:50%;background:#0b4fc7;margin-top:3px}.audit-row>div{display:grid;gap:2px}.audit-row strong{font-size:9.5px;color:#17345c}.audit-row small{font-size:8px;color:#718096}.audit-row p{font-size:8.7px;color:#53657c;margin:2px 0 0}.btn.small{min-height:31px!important;padding:6px 9px!important;font-size:8.5px!important}
@media(max-width:700px){.publishing-grid{grid-template-columns:1fr}.publishing-actions{grid-template-columns:1fr}}


/* Phase 6 — Customer & Commerce Intelligence */
.customer-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.customer-metrics>div{padding:12px;border:1px solid #e5ebf2;border-radius:14px;background:#fff}.customer-metrics span{display:block;font-size:8.5px;color:#718096}.customer-metrics strong{display:block;margin-top:4px;font-size:18px;color:#17345c}
.customer-toolbar{display:grid;grid-template-columns:1fr 190px;gap:8px;margin-bottom:9px}.customer-toolbar select{height:38px;border:1px solid #dfe7f0;border-radius:10px;padding:0 10px;background:#fff;font-size:9.5px}.customer-list{display:grid;gap:7px}.customer-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid #e7edf4;border-radius:13px;background:#fff}.customer-avatar{width:40px;height:40px;border-radius:12px;background:#eef5ff;color:#0b4fc7;display:grid;place-items:center;font-size:15px;font-weight:850}.customer-main{display:grid;gap:2px;min-width:0}.customer-main strong{font-size:10.5px;color:#17345c}.customer-main span,.customer-main small{font-size:8.5px;color:#718096}
.customer-detail-card{width:min(720px,calc(100% - 24px));padding:0}.customer-detail-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:14px}.customer-detail-summary>div{padding:10px;border:1px solid #e7edf4;border-radius:11px;background:#fbfdff}.customer-detail-summary span{display:block;font-size:8px;color:#718096}.customer-detail-summary strong{display:block;margin-top:4px;font-size:10px;color:#17345c}.customer-detail-tabs{display:flex;gap:5px;padding:0 14px 10px}.customer-detail-tabs button{border:1px solid #dfe7f0;border-radius:8px;background:#fff;padding:7px 9px;font-size:8.5px;font-weight:800;color:#53657c}.customer-detail-tabs button.active{background:#0b4fc7;color:#fff;border-color:#0b4fc7}.customer-detail-body{padding:0 14px 14px}.customer-tab-panel{display:none}.customer-tab-panel.active{display:grid;gap:6px}.customer-history-row{display:grid;grid-template-columns:58px 1fr;gap:8px;padding:9px;border:1px solid #e7edf4;border-radius:10px}.customer-history-row>span{font-size:8px;font-weight:800;color:#0b4fc7}.customer-history-row>div{display:grid;gap:2px}.customer-history-row strong{font-size:9.5px;color:#17345c}.customer-history-row small,.customer-history-row p{font-size:8.3px;color:#718096;margin:0}
.order-detail-card{width:min(700px,calc(100% - 24px));padding:0}.order-detail-body{padding:14px}.order-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.order-summary-grid>div{padding:10px;border:1px solid #e7edf4;border-radius:11px}.order-summary-grid span{display:block;font-size:8px;color:#718096}.order-summary-grid strong{display:block;margin:4px 0 2px;font-size:10px;color:#17345c}.order-summary-grid small{font-size:8px;color:#718096}.order-items{margin-top:10px}.order-items h4{font-size:10px;color:#17345c}.order-items>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #edf1f5;font-size:9px}.order-items>p{font-size:9px;color:#718096}.order-detail-footer{display:flex;justify-content:flex-end;gap:7px;padding:12px 14px;border-top:1px solid #edf1f5}
.shop-availability{font-size:8px;font-weight:800;color:#53657c;margin-top:7px}.shop-availability.available{color:#067647}.shop-availability.out_of_stock{color:#b42318}.shop-product-bottom button:disabled,.m-product-card button:disabled{opacity:.42;cursor:not-allowed}
.m-product-card small{font-size:7px;color:#718096}
@media(max-width:760px){.customer-metrics{grid-template-columns:1fr 1fr}.customer-toolbar{grid-template-columns:1fr}.customer-detail-summary{grid-template-columns:1fr 1fr}.customer-row{grid-template-columns:38px 1fr}.customer-row>.btn{grid-column:2;width:fit-content}.order-summary-grid{grid-template-columns:1fr}}

/* Phase 7 — Production Health */
.deployment-health{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 11px}.deployment-health>div{padding:11px;border:1px solid #e5ebf2;border-radius:13px;background:#fff}.deployment-health span{display:block;font-size:8px;color:#718096}.deployment-health strong{display:block;margin:4px 0 2px;font-size:11px;color:#17345c}.deployment-health small{font-size:7.8px;color:#718096}
@media(max-width:700px){.deployment-health{grid-template-columns:1fr 1fr}}


/* FINAL CRM MODAL FIX — Customer and Order details are overlays, never page content */
#customerDetailModal.modal,
#orderDetailModal.modal{
  position:fixed!important;
  inset:0!important;
  z-index:34000!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:18px!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  background:rgba(8,24,46,.58)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#customerDetailModal.modal.open,
#orderDetailModal.modal.open{
  display:flex!important;
}

#customerDetailModal .customer-detail-card,
#orderDetailModal .order-detail-card{
  position:relative!important;
  z-index:34001!important;
  width:min(720px,100%)!important;
  max-height:calc(100dvh - 36px)!important;
  margin:auto!important;
  overflow:auto!important;
  background:#fff!important;
  border-radius:18px!important;
  box-shadow:0 28px 80px rgba(5,28,60,.28)!important;
}

#customerDetailModal .modal-head,
#orderDetailModal .modal-head{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  background:#fff!important;
}

@media(max-width:700px){
  #customerDetailModal.modal,
  #orderDetailModal.modal{
    padding:10px!important;
  }

  #customerDetailModal .customer-detail-card,
  #orderDetailModal .order-detail-card{
    width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:16px!important;
  }
}

/* Requested metric value sizing */
.metric strong {
  display: block;
  font-size: 20px;
}


/* Admin Access — password management */
.password-management-card{border-color:rgba(11,79,199,.13)!important}
.password-change-form{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.password-change-form label{display:grid;gap:5px}
.password-change-form label span{font-size:8.5px;font-weight:800;color:#53657c}
.password-change-form label:first-child{grid-column:1/-1}
.password-change-form input{width:100%;height:39px;padding:0 10px;border:1px solid #dfe7f0;border-radius:10px;background:#fff;color:#17345c;outline:none}
.password-change-form input:focus{border-color:#8ab0e6;box-shadow:0 0 0 3px rgba(11,79,199,.07)}
.password-guidance{grid-column:1/-1;padding:8px 10px;border-radius:9px;background:#f7f9fc;color:#718096;font-size:8.5px;line-height:1.45}
.password-change-form .security-save{grid-column:1/-1;justify-self:start}
@media(max-width:700px){.password-change-form{grid-template-columns:1fr}.password-change-form label:first-child,.password-guidance,.password-change-form .security-save{grid-column:auto}.password-change-form .security-save{width:100%}}

/* REGRESSION FIX — clean Admin mobile menu control */
.admin-menu-toggle{
  display:none;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #dfe7f0!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#17345c!important;
  box-shadow:0 3px 10px rgba(15,35,65,.06)!important;
  align-items:center!important;
  justify-content:center!important;
}
.admin-menu-toggle svg{
  display:block!important;
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.admin-menu-toggle:active{
  transform:scale(.96)!important;
}
@media(max-width:700px){
  .admin-menu-toggle{display:inline-flex!important}
}

/* ============================================================
   FINAL MODAL SYSTEM — Admin
   Applies to ALL Admin modals consistently.
   ============================================================ */
body.hasbun-modal-open{
  overflow:hidden!important;
}

body .modal{
  position:fixed!important;
  inset:0!important;
  z-index:40000!important;
  width:100vw!important;
  height:100dvh!important;
  margin:0!important;
  padding:20px!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  background:rgba(7,22,44,.58)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

body .modal.open{
  display:flex!important;
}

body .modal>.modal-card{
  position:relative!important;
  z-index:40001!important;
  width:min(680px,100%)!important;
  max-width:100%!important;
  max-height:calc(100dvh - 40px)!important;
  margin:auto!important;
  padding:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:18px!important;
  box-shadow:0 30px 90px rgba(4,20,45,.30)!important;
}

body .modal .modal-head{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  min-height:62px!important;
  padding:14px 16px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid #edf1f5!important;
}

body .modal .modal-head>div{
  min-width:0!important;
}

body .modal .modal-head h3{
  margin:0!important;
  font-size:15px!important;
  line-height:1.2!important;
  color:#17345c!important;
}

body .modal .modal-head p{
  margin:3px 0 0!important;
  font-size:9.5px!important;
  line-height:1.4!important;
  color:#718096!important;
}

body .modal .modal-close{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e4eaf1!important;
  border-radius:10px!important;
  background:#f7f9fc!important;
  color:#17345c!important;
  box-shadow:none!important;
  cursor:pointer!important;
}

body .modal .modal-close svg{
  width:16px!important;
  height:16px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

body .modal .modal-close:hover{
  background:#eef4fb!important;
}

body .modal form{
  margin:0!important;
}

/* Edit/Add Product */
#shopProductModal .shop-product-admin-card{
  width:min(720px,100%)!important;
}

#shopProductModal .shop-product-form-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  padding:16px!important;
}

#shopProductModal .shop-product-form-grid>label{
  display:grid!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
  font-size:9.5px!important;
  font-weight:800!important;
  color:#53657c!important;
}

#shopProductModal .shop-product-form-grid>label>span{
  font-size:9.5px!important;
  font-weight:800!important;
  color:#53657c!important;
}

#shopProductModal .shop-product-form-grid input:not([type="checkbox"]),
#shopProductModal .shop-product-form-grid select,
#shopProductModal .shop-product-form-grid textarea{
  width:100%!important;
  min-width:0!important;
  border:1px solid #dce4ef!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#17345c!important;
  outline:none!important;
  font:inherit!important;
}

#shopProductModal .shop-product-form-grid input:not([type="checkbox"]),
#shopProductModal .shop-product-form-grid select{
  height:40px!important;
  padding:0 10px!important;
}

#shopProductModal .shop-product-form-grid input[type="file"]{
  height:auto!important;
  padding:8px!important;
  font-size:9px!important;
}

#shopProductModal .shop-product-form-grid textarea{
  min-height:96px!important;
  padding:10px!important;
  resize:vertical!important;
}

#shopProductModal .shop-product-form-grid input:focus,
#shopProductModal .shop-product-form-grid select:focus,
#shopProductModal .shop-product-form-grid textarea:focus{
  border-color:#8ab0e6!important;
  box-shadow:0 0 0 3px rgba(11,79,199,.07)!important;
}

#shopProductModal .shop-product-form-grid .wide{
  grid-column:1/-1!important;
}

#shopProductModal .shop-active{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:38px!important;
  padding:9px 10px!important;
  border:1px solid #e7edf4!important;
  border-radius:10px!important;
  background:#fbfdff!important;
}

#shopProductModal .shop-active input{
  width:16px!important;
  height:16px!important;
  margin:0!important;
  flex:0 0 16px!important;
}

.shop-product-image-field{
  grid-column:1/-1!important;
}

.shop-product-image-picker{
  display:grid!important;
  grid-template-columns:92px 1fr!important;
  gap:12px!important;
  align-items:center!important;
  padding:10px!important;
  border:1px solid #e5ebf2!important;
  border-radius:12px!important;
  background:#fbfdff!important;
}

.shop-product-image-picker img{
  width:92px!important;
  height:76px!important;
  object-fit:cover!important;
  border-radius:10px!important;
  background:#eef3f8!important;
  border:1px solid #e3eaf2!important;
}

.shop-product-image-picker>div{
  min-width:0!important;
  display:grid!important;
  gap:5px!important;
}

.shop-product-image-picker small{
  font-size:8px!important;
  line-height:1.4!important;
  color:#8290a4!important;
}

#shopProductModal .admin-profile-footer{
  position:sticky!important;
  bottom:0!important;
  z-index:7!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:8px!important;
  padding:12px 16px!important;
  margin:0!important;
  background:#fff!important;
  border-top:1px solid #edf1f5!important;
}

/* Menu Item */
#menuItemModal .menu-item-card{
  width:min(580px,100%)!important;
}

/* Admin Profile */
#adminProfileModal .admin-profile-card{
  width:min(620px,100%)!important;
}

/* Customer + Order */
#customerDetailModal .customer-detail-card{
  width:min(720px,100%)!important;
}
#orderDetailModal .order-detail-card{
  width:min(700px,100%)!important;
}
#orderDetailModal .order-detail-footer{
  position:sticky!important;
  bottom:0!important;
  z-index:7!important;
  background:#fff!important;
}

/* Prevent any dialog card from falling into normal page flow */
#adminProfileModal,
#shopProductModal,
#menuItemModal,
#customerDetailModal,
#orderDetailModal{
  position:fixed!important;
}

@media(max-width:700px){
  body .modal{
    padding:10px!important;
    align-items:flex-end!important;
  }

  body .modal>.modal-card{
    width:100%!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:16px!important;
  }

  body .modal .modal-head{
    min-height:58px!important;
    padding:12px 13px!important;
  }

  #shopProductModal .shop-product-form-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:13px!important;
  }

  #shopProductModal .shop-product-form-grid .wide,
  .shop-product-image-field{
    grid-column:auto!important;
  }

  .shop-product-image-picker{
    grid-template-columns:76px 1fr!important;
    gap:9px!important;
  }

  .shop-product-image-picker img{
    width:76px!important;
    height:68px!important;
  }

  #shopProductModal .admin-profile-footer,
  #orderDetailModal .order-detail-footer{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    padding:10px 13px!important;
  }

  #shopProductModal .admin-profile-footer .btn,
  #orderDetailModal .order-detail-footer .btn{
    width:100%!important;
    margin:0!important;
    justify-content:center!important;
  }

  .customer-detail-summary{
    grid-template-columns:1fr 1fr!important;
  }
}

/* Unified Media Library + Product Media Picker */
.shop-product-image-controls{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center}
.shop-product-image-controls small{grid-column:1/-1}
#shopProductMediaChoose{margin:0!important;white-space:nowrap}
.media-card-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:5px;margin-top:4px}
.media-card-actions .btn{margin:0!important;width:100%!important;justify-content:center!important}
.media-card-actions .danger{grid-column:1/-1}
.media-edit-card{width:min(650px,100%)!important}
.media-edit-body{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:16px}
.media-edit-body>img{width:190px;height:160px;object-fit:cover;border-radius:14px;border:1px solid #e3eaf2;background:#eef3f8}
.media-edit-fields{display:grid;gap:12px;align-content:center}
.media-edit-fields label{display:grid;gap:6px;font-size:9.5px;font-weight:800;color:#53657c}
.media-edit-fields input{width:100%;min-width:0;padding:10px;border:1px solid #dce4ef;border-radius:10px}
.media-edit-fields small{font-size:8px;font-weight:500;color:#8290a4}
.media-edit-footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #edf1f5;background:#fff}
.media-picker-card{width:min(820px,100%)!important}
.media-picker-tools{padding:12px 14px;border-bottom:1px solid #edf1f5;background:#fbfdff}
.media-picker-tools input{width:min(360px,100%);height:38px;padding:0 11px;border:1px solid #dce4ef;border-radius:10px}
.media-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px}
.media-picker-item{min-width:0;padding:0;border:1px solid #e4eaf2;border-radius:13px;background:#fff;overflow:hidden;text-align:left;cursor:pointer}
.media-picker-item:hover{border-color:#9fc0ec;box-shadow:0 8px 22px rgba(20,52,92,.08)}
.media-picker-item img{display:block;width:100%;height:105px;object-fit:cover;background:#eef3f8}
.media-picker-item span{display:grid;gap:3px;padding:8px}
.media-picker-item strong{font-size:9px;color:#17345c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-picker-item small{font-size:7.5px;color:#718096;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
 .shop-product-image-controls{grid-template-columns:1fr}
 .shop-product-image-controls small{grid-column:auto}
 .media-edit-body{grid-template-columns:1fr;padding:13px}
 .media-edit-body>img{width:100%;height:190px}
 .media-edit-footer{display:grid;grid-template-columns:1fr 1fr;padding:10px 13px}
 .media-edit-footer .btn{width:100%!important;margin:0!important;justify-content:center!important}
 .media-picker-grid{grid-template-columns:1fr 1fr;padding:10px}
 .media-picker-item img{height:100px}
}