/* Menu20 / MzCodeStore Modern UI 2026
   Visual override only. No routes, forms or business logic are changed. */
:root{
  --mz-bg:#f6f7fb;
  --mz-surface:#ffffff;
  --mz-surface-2:#fbfbfd;
  --mz-text:#211c38;
  --mz-muted:#858097;
  --mz-border:#e9e7f0;
  --mz-primary:#211649;
  --mz-primary-2:#3b257d;
  --mz-accent:#ff6b45;
  --mz-success:#00aa4f;
  --mz-danger:#e84b5f;
  --mz-warning:#f0a51b;
  --mz-radius:14px;
  --mz-radius-sm:10px;
  --mz-shadow:0 10px 30px rgba(28,23,59,.07);
  --mz-shadow-sm:0 5px 18px rgba(28,23,59,.05);
}
html{background:var(--mz-bg)}
body{font-family:'Poppins',sans-serif!important;background:var(--mz-bg)!important;color:var(--mz-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{transition:all .18s ease}
.container{width:min(1170px,calc(100% - 34px))}
.middle{background:var(--mz-bg)!important;padding-top:28px!important;padding-bottom:40px!important}
.minfit{min-height:calc(100vh - 225px)}
.clear{clear:both}

/* Header */
.header{background:#fff;box-shadow:0 1px 0 rgba(29,22,62,.06);position:relative;z-index:80}
.header .top{background:#fff!important;border:0!important;min-height:88px;display:flex;align-items:center}
.header .top .container{padding-top:0!important;padding-bottom:0!important}
.header .brand img{max-height:44px;max-width:190px;object-fit:contain}
.header .user-info{display:flex;align-items:center;gap:4px}
.header .user-info>div{float:none!important}
.header .user-info a{height:40px;display:flex!important;align-items:center;gap:8px;padding:0 11px!important;border-radius:9px;color:#504a61!important;text-decoration:none!important}
.header .user-info a:hover{background:#f5f3fa;color:var(--mz-primary)!important}
.header .user-info i{font-size:17px!important}
.header .user-info-login span{font-size:12px;font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigator{background:var(--mz-primary)!important;border:0!important;box-shadow:none!important}
.navigator .container{padding-top:0!important;padding-bottom:0!important}
.navigator .navbar{margin:0!important;min-height:58px!important}
.navigator .navbar-nav{display:flex;align-items:center;min-height:58px;flex-wrap:wrap}
.navigator .navbar-nav>li>a{color:rgba(255,255,255,.9)!important;font-size:12px!important;font-weight:700!important;padding:20px 14px!important;border-radius:8px!important;line-height:18px!important}
.navigator .navbar-nav>li>a:hover,.navigator .navbar-nav>li.open>a,.navigator .navbar-nav>li.active>a{background:rgba(255,255,255,.10)!important;color:#fff!important}
.navigator .dropdown-menu{border:1px solid var(--mz-border)!important;border-radius:12px!important;box-shadow:0 16px 38px rgba(27,19,60,.18)!important;padding:8px!important;min-width:220px!important;margin-top:3px!important}
.navigator .dropdown-menu>li>a{border-radius:8px!important;padding:10px 12px!important;font-size:12px!important;color:#514b61!important}
.navigator .dropdown-menu>li>a:hover{background:#f3f0ff!important;color:#4225a9!important}
.navigator .dropdown-menu i{margin-right:7px}

/* Mobile header / sidr */
@media(max-width:991px){
  .header .top{background:var(--mz-primary)!important;min-height:66px}
  .header .top .brand img{max-height:34px}
  .header .user-menu a,.header .user-info a{background:rgba(255,255,255,.08)!important;width:40px;height:40px;display:flex!important;align-items:center;justify-content:center;border-radius:10px;padding:0!important}
  .header .user-menu i,.header .user-info i{color:#fff!important}
  .align-middle-mobile{display:flex!important;align-items:center!important}
  #sidr-left,#sidr-right,.sidr{background:#fff!important;box-shadow:0 0 45px rgba(26,18,62,.2)!important}
  .sidr ul li a{font-size:13px!important;font-weight:600!important;padding:11px 16px!important}
}

/* Page headings */
.title-icon{display:flex!important;align-items:center;gap:12px;margin:0 0 22px!important}
.title-icon>i{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--mz-primary)!important;color:#fff!important;font-size:19px!important;box-shadow:0 7px 18px rgba(33,22,73,.16)}
.title-icon>span{font-size:22px!important;font-weight:700!important;color:var(--mz-text)!important}
.bread-box{margin-top:11px}
.bread{display:flex;align-items:center;gap:9px;font-size:11px;color:#9b96a7}
.bread a{color:#6842dc!important;text-decoration:none}

/* Surfaces / cards */
.box-white,.box,.adicionado,.lista,.filter-box,.content-box,.card,.painel-box,.pedido,.plano,.relatorio-box{border-radius:var(--mz-radius)!important;border:1px solid var(--mz-border)!important;box-shadow:var(--mz-shadow-sm)!important;background:var(--mz-surface)!important}
.box-white{overflow:hidden}
.filter-box,.lista,.adicionado{padding:18px!important}

/* Legacy filter bar */
.filtrar,.filter-title,.filter-header{border-radius:12px!important;overflow:hidden}
.filter-title,.filter-header{background:var(--mz-primary)!important;color:#fff!important}

/* Forms */
.form-field,.form-field-default{margin-bottom:16px!important}
.form-field label,.form-field-default label,label{font-size:12px!important;font-weight:700!important;color:#4d475d!important}
.form-field input[type=text],.form-field input[type=email],.form-field input[type=password],.form-field input[type=number],.form-field input[type=date],.form-field input[type=time],.form-field select,.form-field textarea,
.form-field-default input[type=text],.form-field-default input[type=email],.form-field-default input[type=password],.form-field-default input[type=number],.form-field-default input[type=date],.form-field-default input[type=time],.form-field-default select,.form-field-default textarea,
input.form-control,select.form-control,textarea.form-control{
  border:1px solid #dedbe7!important;background:#fbfbfd!important;border-radius:10px!important;box-shadow:none!important;min-height:44px!important;color:#312b45!important;font-size:13px!important;transition:.18s ease!important
}
textarea.form-control,.form-field textarea,.form-field-default textarea{min-height:96px!important;padding-top:11px!important}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.form-field-default input:focus,.form-field-default select:focus,.form-field-default textarea:focus,.form-control:focus{background:#fff!important;border-color:#7654ed!important;box-shadow:0 0 0 3px rgba(118,84,237,.10)!important;outline:none!important}
.form-field-icon{position:relative}
.form-field-icon .form-icon{left:15px!important;color:#6f48dd!important}
.fake-select{border-radius:10px!important;background:#fbfbfd!important;border-color:#dedbe7!important;min-height:44px!important}
.fake-select select{min-height:44px!important}
.sp-replacer{border-radius:9px!important;border-color:#dedbe7!important;background:#fff!important;padding:8px!important}

/* Buttons */
button,.button,.btn,.botao-acao,input[type=submit]{font-family:'Poppins',sans-serif!important}
.btn,.button,.botao-acao,.button-default,.button-primary,.button-green,.button-red{border-radius:9px!important;font-weight:700!important;transition:.18s ease!important;box-shadow:none!important}
.botao-acao,.button-primary,.btn-primary{padding:11px 16px!important}
.btn:hover,.button:hover,.botao-acao:hover{transform:translateY(-1px)}
.btn-success,.button-green{background:var(--mz-success)!important;border-color:var(--mz-success)!important;color:#fff!important}
.btn-danger,.button-red{background:var(--mz-danger)!important;border-color:var(--mz-danger)!important;color:#fff!important}

/* Tables */
.table-responsive{border:0!important;border-radius:12px!important;overflow-x:auto!important;background:#fff}
table{background:#fff!important;border-collapse:separate!important;border-spacing:0!important;width:100%}
table thead th,table tr:first-child th{background:#f8f7fb!important;color:#817b92!important;text-transform:uppercase;font-size:10px!important;letter-spacing:.035em;font-weight:800!important;border-color:#ece9f2!important;padding:13px 12px!important}
table td{font-size:12px!important;color:#4a4458!important;border-color:#f0eef4!important;padding:12px!important;vertical-align:middle!important}
table tbody tr{transition:.15s ease}
table tbody tr:hover{background:#fcfbff!important}
table tbody tr:last-child td{border-bottom:0!important}

/* Pagination */
.pagination>li>a,.pagination>li>span{border:0!important;border-radius:8px!important;margin:0 3px!important;color:#5d5670!important;background:#fff!important;box-shadow:0 2px 8px rgba(25,20,54,.05)}
.pagination>.active>a,.pagination>.active>span{background:var(--mz-primary)!important;color:#fff!important}

/* Messages */
.msg,.alert{border-radius:10px!important;border:1px solid transparent!important;box-shadow:none!important;font-size:12px!important}
.msg-error,.alert-danger{background:#fff0f2!important;border-color:#ffd7dd!important;color:#9f2d3c!important}
.msg-done,.alert-success{background:#edf9f1!important;border-color:#d0f0da!important;color:#24743f!important}

/* List/action tiles */
.lista .item,.item-list,.action-item{border-radius:10px!important;border-color:#ebe8f1!important;transition:.18s ease!important}
.lista .item:hover,.item-list:hover,.action-item:hover{background:#faf9fd!important;border-color:#ded8ef!important;transform:translateY(-1px)}

/* Tabs / steps */
.nav-tabs{border-bottom:1px solid var(--mz-border)!important}
.nav-tabs>li>a{border:0!important;border-radius:9px 9px 0 0!important;font-size:12px!important;font-weight:700!important;color:#777086!important}
.nav-tabs>li.active>a,.nav-tabs>li>a:hover{background:#f3f0ff!important;color:#4c2ac5!important;border:0!important}
.wizard>.steps a,.wizard>.steps a:hover,.wizard>.steps a:active{border-radius:10px!important}

/* Footer */
.footer,.rdp{background:var(--mz-primary)!important;color:rgba(255,255,255,.84)!important;border:0!important}
.footer a,.rdp a{color:#fff!important}

/* Processing */
.processing{background:rgba(21,15,50,.72)!important;backdrop-filter:blur(5px);z-index:999999!important}
.processing .center{background:#fff;border-radius:16px;padding:24px 28px!important;box-shadow:0 20px 60px rgba(0,0,0,.22);color:var(--mz-text)!important}
.processing .rotating{color:#6842e8!important}

/* Dashboard and common responsive refinements */
@media(max-width:991px){
  .container{width:calc(100% - 24px)!important}
  .middle{padding-top:20px!important}
  .title-icon>span{font-size:19px!important}
  .bread-box{display:none!important}
  .box-white,.box,.adicionado,.lista,.filter-box,.content-box,.card{border-radius:12px!important}
  .row>[class*='col-']{min-width:0}
}
@media(max-width:767px){
  .container{width:calc(100% - 18px)!important;padding-left:0!important;padding-right:0!important}
  .middle{padding-top:16px!important;padding-bottom:24px!important}
  .title-icon{margin-bottom:14px!important;gap:9px}
  .title-icon>i{width:40px;height:40px;border-radius:10px;font-size:16px!important}
  .title-icon>span{font-size:17px!important}
  .form-field,.form-field-default{margin-bottom:12px!important}
  .btn,.button,.botao-acao{min-height:42px}
  table.responsive-table thead{display:none}
  .filter-box,.lista,.adicionado{padding:14px!important}
}

/* =========================================================
   MODERN SHELL 2026 - structural redesign (desktop + mobile)
   Keeps legacy URLs/forms/logic, changes only presentation.
   ========================================================= */
:root{
  --mz-sidebar:264px;
  --mz-topbar:76px;
  --mz-shell:#0f172a;
  --mz-shell-2:#172554;
  --mz-shell-muted:#93a4bf;
  --mz-canvas:#f4f7fb;
  --mz-card:#ffffff;
  --mz-stroke:#e6ebf2;
  --mz-violet:#6d4aff;
  --mz-violet-2:#8c72ff;
}

@media(min-width:992px){
  body{padding-left:var(--mz-sidebar)!important;background:var(--mz-canvas)!important;overflow-x:hidden}
  .header{position:relative!important;height:0!important;z-index:1000!important;background:transparent!important;box-shadow:none!important}

  /* topbar */
  .header .top{
    position:fixed!important;top:0!important;left:var(--mz-sidebar)!important;right:0!important;height:var(--mz-topbar)!important;min-height:var(--mz-topbar)!important;
    background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--mz-stroke)!important;box-shadow:0 8px 24px rgba(15,23,42,.04)!important;z-index:1100!important
  }
  .header .top .container{width:100%!important;max-width:none!important;height:100%!important;padding:0 28px!important}
  .header .top .row{height:100%!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}
  .header .top .col-md-3:first-child{display:none!important}
  .header .top .col-md-6{display:none!important}
  .header .top .col-md-9,.header .top .col-md-3:last-child{width:auto!important;margin-left:auto!important;float:none!important;padding:0!important}
  .header .user-info{gap:8px!important}
  .header .user-info a{height:42px!important;border:1px solid transparent!important;background:#f7f9fc!important;padding:0 13px!important;border-radius:12px!important;color:#334155!important}
  .header .user-info a:hover{background:#fff!important;border-color:#dfe5ee!important;box-shadow:0 5px 15px rgba(15,23,42,.06)!important}
  .header .user-info-login a{padding-right:15px!important}
  .header .user-info-login span{font-weight:700!important;color:#1e293b!important}
  .header .user-info i{color:#5b4ce6!important}

  /* sidebar */
  .navigator{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:var(--mz-sidebar)!important;height:100vh!important;
    background:linear-gradient(180deg,#0b1222 0%,#111a31 55%,#131c35 100%)!important;border:0!important;
    box-shadow:10px 0 35px rgba(15,23,42,.14)!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:1200!important;
    padding:96px 14px 22px!important
  }
  .navigator:before{
    content:"";position:absolute;left:22px;right:22px;top:24px;height:48px;background:url('/_core/_cdn/img/logowhite.png') left center/contain no-repeat;
  }
  .navigator:after{
    content:"PAINEL DE GESTÃO";position:absolute;left:22px;top:75px;color:#667892;font-size:8px;font-weight:800;letter-spacing:.18em
  }
  .navigator .container,.navigator .row,.navigator .col-md-12{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  .navigator .navbar{float:none!important;width:100%!important;min-height:0!important;margin:0!important;border:0!important}
  .navigator .navbar-nav{float:none!important;width:100%!important;display:block!important;min-height:0!important;margin:0!important}
  .navigator .navbar-nav>li{float:none!important;width:100%!important;margin:3px 0!important}
  .navigator .navbar-nav>li>a{
    display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:46px!important;padding:12px 13px!important;
    color:#cbd5e1!important;border-radius:12px!important;font-size:12px!important;font-weight:700!important;line-height:20px!important;background:transparent!important
  }
  .navigator .navbar-nav>li>a>i:first-child{width:20px!important;font-size:17px!important;color:#8797b1!important;text-align:center!important}
  .navigator .navbar-nav>li>a>span{flex:1!important}
  .navigator .navbar-nav>li>a .icon-right{margin-left:auto!important;font-size:10px!important;color:#667892!important;transition:transform .18s ease}
  .navigator .navbar-nav>li.open>a .icon-right{transform:rotate(180deg)}
  .navigator .navbar-nav>li>a:hover,.navigator .navbar-nav>li.open>a,.navigator .navbar-nav>li.mz-current>a{
    color:#fff!important;background:linear-gradient(90deg,rgba(109,74,255,.24),rgba(109,74,255,.08))!important;
    box-shadow:inset 3px 0 0 #7b5cff!important
  }
  .navigator .navbar-nav>li>a:hover>i:first-child,.navigator .navbar-nav>li.open>a>i:first-child,.navigator .navbar-nav>li.mz-current>a>i:first-child{color:#a995ff!important}
  .navigator .dropdown-menu{
    position:static!important;float:none!important;width:100%!important;min-width:0!important;margin:4px 0 6px!important;padding:4px 0 5px 33px!important;
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
  }
  .navigator .dropdown-menu>li>a{
    display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;border-radius:9px!important;
    color:#8fa0bb!important;font-size:11px!important;font-weight:600!important;background:transparent!important
  }
  .navigator .dropdown-menu>li>a:hover,.navigator .dropdown-menu>li.mz-current>a{color:#fff!important;background:rgba(255,255,255,.06)!important}
  .navigator .dropdown-menu>li>a i{font-size:12px!important;color:#6f82a0!important}
  .navigator .mz-portal-nav{margin-top:18px!important;padding-top:16px!important;border-top:1px solid rgba(148,163,184,.12)!important}
  .navigator .mz-portal-nav .navbar-nav>li>a{background:rgba(255,255,255,.055)!important;color:#e2e8f0!important}

  /* content shell */
  .middle{margin-left:0!important;padding-top:calc(var(--mz-topbar) + 28px)!important;min-height:100vh!important;background:var(--mz-canvas)!important}
  .middle>.container{width:calc(100% - 48px)!important;max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
  .minfit{min-height:calc(100vh - var(--mz-topbar))!important}
  .rdp,.footer{margin-left:0!important}
  .title-icon{margin-top:0!important}

  /* page surface polish */
  .box-white,.box,.adicionado,.lista,.filter-box,.content-box,.card,.painel-box,.pedido,.plano,.relatorio-box,.dash-card,.metric-card,.small-card{
    border:1px solid var(--mz-stroke)!important;box-shadow:0 10px 30px rgba(15,23,42,.055)!important
  }
}

/* modern mobile shell */
@media(max-width:991px){
  body{padding-left:0!important;background:var(--mz-canvas)!important}
  .header{position:sticky!important;top:0!important;z-index:1000!important;box-shadow:0 8px 24px rgba(15,23,42,.09)!important}
  .header .top{height:64px!important;min-height:64px!important;background:#0f172a!important;border:0!important}
  .header .top .container{width:100%!important;padding:0 14px!important}
  .header .brand img{max-height:31px!important;max-width:145px!important}
  .header .user-menu a,.header .user-info a{background:#1d2942!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:11px!important}
  .middle{padding-top:18px!important}
  .sidr{background:#0f172a!important;color:#fff!important}
  .sidr .sidebar{background:#0f172a!important;min-height:100vh!important}
  .sidr .sidebar-header{background:#0f172a!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
  .sidr .close-sidebar{color:#fff!important}
  .sidr .search-bar{padding:12px!important}
  .sidr .search-bar input{background:#17223a!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff!important;border-radius:10px!important}
  .sidr .navbar-mobile .navbar{width:100%!important;float:none!important;margin:0!important}
  .sidr .navbar-mobile .navbar-nav{width:100%!important;margin:0!important}
  .sidr .navbar-mobile .navbar-nav>li{float:none!important;width:100%!important}
  .sidr .navbar-mobile .navbar-nav>li>a{display:flex!important;align-items:center!important;gap:11px!important;color:#d5deeb!important;background:transparent!important;padding:12px 15px!important;border-radius:9px!important;font-size:12px!important}
  .sidr .navbar-mobile .navbar-nav>li>a i:first-child{color:#9a87ff!important;width:18px!important}
  .sidr .navbar-mobile .dropdown-menu{position:static!important;float:none!important;width:100%!important;background:#121d33!important;border:0!important;box-shadow:none!important;padding:4px 8px 6px 28px!important}
  .sidr .navbar-mobile .dropdown-menu a{color:#99a9c0!important;background:transparent!important;font-size:11px!important;padding:9px!important}
}

/* stronger visual hierarchy across legacy pages */
.middle .container>.row:first-child{margin-bottom:4px}
.form-default,.form-field-default,.filter-box,.lista{font-size:13px}
.filter-title,.filter-header,.filtrar{background:linear-gradient(90deg,#111827,#1e293b)!important}
.botao-acao,.button-primary,.btn-primary{background:linear-gradient(135deg,#5f43e8,#7a5cff)!important;border:0!important;color:#fff!important;box-shadow:0 7px 16px rgba(95,67,232,.20)!important}
.btn-success,.button-green{box-shadow:0 7px 16px rgba(0,170,79,.16)!important}
.title-icon>i{background:linear-gradient(135deg,#5f43e8,#7d61ff)!important;box-shadow:0 10px 24px rgba(95,67,232,.20)!important}
.title-icon>span{letter-spacing:-.025em!important}

@media(max-width:767px){
  .middle>.container{width:calc(100% - 20px)!important}
  .metric-card,.small-card,.dash-card{border-radius:13px!important}
}


/* === HOTFIX DEFINITIVO HEADER DESKTOP/MOBILE 2026 ===
   A regra estrutural anterior forçava também a linha .align-middle-mobile
   a aparecer no desktop. Mantém cada cabeçalho apenas no breakpoint correto.
*/
@media (min-width: 992px) {
  .header .top .row.align-middle {
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .header .top .row.align-middle-mobile,
  .header .top .visible-sm.visible-xs,
  .header .top .align-middle-mobile {
    display: none !important;
    visibility: hidden !important;
  }

  .header .top .row.align-middle .col-md-3:first-child {
    display: none !important;
  }

  .header .top .row.align-middle .col-md-9 {
    display: block !important;
    width: auto !important;
    margin-left: auto !important;
    float: none !important;
    padding: 0 !important;
  }

  .header .top .row.align-middle .user-info {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    float: none !important;
    margin: 0 !important;
    position: static !important;
  }

  .header .top .row.align-middle .user-info > div {
    display: block !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
  }
}

@media (max-width: 991px) {
  .header .top .row.align-middle {
    display: none !important;
    visibility: hidden !important;
  }

  .header .top .row.align-middle-mobile {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    margin: 0 !important;
    width: 100% !important;
  }
}


/* =========================================================
   MENU LATERAL RECOLHIDO POR PADRAO 2026
   Admin Master e Painel do Lojista começam fechados no desktop.
   ========================================================= */
@media(min-width:992px){
  body.mz-menu-closed{padding-left:0!important}
  body.mz-menu-closed .header .top{left:0!important}
  body.mz-menu-closed .navigator{transform:translateX(-100%)!important;box-shadow:none!important;pointer-events:none!important}
  .navigator{transition:transform .22s ease,box-shadow .22s ease!important}
  .header .top{transition:left .22s ease!important}
  body{transition:padding-left .22s ease!important}

  .mz-menu-toggle{
    position:fixed;left:18px;top:17px;z-index:1305;width:42px;height:42px;border:1px solid #e1e6ef;border-radius:12px;
    background:#fff;color:#4f46e5;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(15,23,42,.10);
    cursor:pointer;transition:.18s ease
  }
  .mz-menu-toggle:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.14)}
  .mz-menu-toggle i{font-size:18px}
  body:not(.mz-menu-closed) .mz-menu-toggle{left:calc(var(--mz-sidebar) + 18px)}
  body:not(.mz-menu-closed) .mz-menu-toggle i:before{content:"\\ea5a"}

  /* Mais área útil quando o menu está fechado */
  body.mz-menu-closed .middle>.container{max-width:1600px!important}
}