/* JBB SMM unified UI — professional, consistent, responsive */
:root{--ink:#2b2030;--ink-soft:#49384d;--muted:#796d7f;--accent:#c72d83;--accent-dark:#a31f69;--accent-deep:#841650;--accent-light:#fbedf5;--line:#ebe4ef;--surface:#fff;--surface-soft:#fcf9fd;--bg:#faf8fc;--success:#187346;--success-bg:#e8f7ee;--warning:#805900;--warning-bg:#fff5d9;--danger:#a42b37;--danger-bg:#fff0f0;--info:#2859a0;--info-bg:#edf3ff;--radius-sm:9px;--radius-md:13px;--radius-lg:18px;--shadow-sm:0 3px 10px rgba(42,25,47,.045);--shadow-md:0 10px 28px rgba(42,25,47,.07);--shadow-lg:0 18px 48px rgba(42,25,47,.13);--transition:180ms ease}
*,*::before,*::after{box-sizing:border-box}html{min-width:320px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}body.drawer-lock{overflow:hidden}img,svg,video{max-width:100%}a{color:var(--accent-dark);text-decoration:none;transition:color var(--transition),background var(--transition)}a:hover{color:var(--accent-deep)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(199,45,131,.25);outline-offset:3px}button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}
/* Header and logo */
.topbar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:12px clamp(16px,4vw,48px);background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 16px rgba(42,25,47,.035)}.brand,.topbar .brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:20px;font-weight:850;letter-spacing:-.045em;line-height:1.2;white-space:nowrap}.brand::before,.topbar .brand::before{content:"J";display:grid;flex:0 0 38px;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#e64da0,#ad206e);color:#fff;box-shadow:0 3px 0 #861650,0 6px 12px rgba(199,45,131,.17);font-size:20px;font-weight:900}.topbar .brand:hover{color:var(--accent-dark);text-decoration:none}
/* JS-created hamburger and slide-out menu */
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;min-height:44px;min-width:44px;width:44px;margin-left:auto;padding:9px;border:0;border-radius:10px;background:transparent;color:var(--ink);box-shadow:none;cursor:pointer;transition:background 160ms ease}.menu-toggle:hover{background:#fbedf5;box-shadow:none;transform:none}.menu-toggle:active{background:#f5dce9;box-shadow:none;transform:none}.hamburger{display:grid;gap:5px;width:22px}.hamburger i{display:block;width:22px;height:2px;border-radius:3px;background:var(--accent-dark)}.topbar nav{position:fixed;inset:0 auto 0 0;z-index:102;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(86vw,330px);max-width:100%;padding:84px 18px 22px;overflow-x:hidden;overflow-y:auto;background:#fff;border-right:1px solid var(--line);box-shadow:20px 0 50px rgba(29,12,28,.15);transform:translateX(-110%);visibility:hidden;pointer-events:none;transition:transform 240ms ease,visibility 240ms ease}.topbar nav.drawer-open{transform:translateX(0);visibility:visible;pointer-events:auto}.topbar nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:11px 13px;border:1px solid transparent;border-radius:11px;background:var(--surface-soft);color:var(--ink-soft);font-size:14px;font-weight:700}.topbar nav a::before{content:"›";display:grid;flex:0 0 25px;place-items:center;width:25px;height:25px;border-radius:8px;background:#f5e2ed;color:var(--accent-dark);font-size:20px;line-height:1}.topbar nav a:hover,.topbar nav a[aria-current="page"]{background:var(--accent-light);border-color:#f0d4e4;color:var(--accent-dark);text-decoration:none}.topbar nav a:hover{transform:translateX(2px)}.topbar nav form{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line)}.topbar nav form button{width:100%}.topbar nav span{padding:10px 13px;color:var(--muted);font-size:12px}.nav-backdrop{position:fixed;inset:0;z-index:101;background:rgba(29,15,30,.42);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 240ms ease,visibility 240ms ease}.nav-backdrop.show{opacity:1;visibility:visible;pointer-events:auto}
/* Page layout */
.container{width:100%;max-width:1440px;min-width:0;margin:0 auto;padding:34px clamp(16px,4vw,48px) 64px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{margin:0 0 7px;color:var(--accent-dark);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}h1,h2,h3,h4{color:var(--ink);line-height:1.25}h1{margin:0 0 10px;font-size:clamp(27px,4vw,38px);font-weight:850;letter-spacing:-.045em;overflow-wrap:anywhere}h2{margin:0 0 10px;font-size:20px;font-weight:800;letter-spacing:-.025em}h3{margin:0 0 8px;font-size:16px;font-weight:800}p{overflow-wrap:anywhere}.muted{color:var(--muted)}.footnote{margin-top:16px;color:var(--muted);font-size:12px}
/* Cards */
.count-card,.stat-card,.panel-card{min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}.count-card{display:flex;flex-direction:column;min-width:130px;gap:3px}.count-card strong{color:var(--ink);font-size:26px;font-weight:850;letter-spacing:-.04em}.count-card span{color:var(--muted);font-size:12px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:15px;margin:24px 0}.stat-card{display:flex;flex-direction:column;gap:7px;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.stat-card:hover{border-color:#e9c4da;box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card span{color:var(--muted);font-size:13px}.stat-card strong{color:var(--ink);font-size:clamp(23px,3vw,30px);font-weight:850;letter-spacing:-.04em;overflow-wrap:anywhere}.panel-card{margin-top:18px}.panel-card p{color:var(--muted);font-size:14px}
/* Unified professional dimensional buttons. Also covers legacy .button classes. */
button,input[type=submit],input[type=button],.primary-link,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:10px 16px;border:1px solid #a51f69;border-radius:11px;background:linear-gradient(180deg,#e64da0 0%,#c72d83 65%,#b92376 100%);color:#fff;font-size:14px;font-weight:800;line-height:1.3;text-align:center;text-decoration:none;box-shadow:0 4px 0 #8e1859,0 7px 14px rgba(156,28,99,.12);cursor:pointer;transition:transform 140ms ease,box-shadow 140ms ease,filter 140ms ease}.button:hover,button:hover,input[type=submit]:hover,input[type=button]:hover,.primary-link:hover{color:#fff;filter:brightness(1.035);text-decoration:none;transform:translateY(2px);box-shadow:0 2px 0 #8e1859,0 4px 10px rgba(156,28,99,.13)}.button:active,button:active,input[type=submit]:active,input[type=button]:active,.primary-link:active{transform:translateY(4px);box-shadow:0 0 0 #8e1859}.button-alt,.button-quiet,button.button-quiet,a.button-quiet{border:1px solid #e2d6e7;background:linear-gradient(180deg,#fff,#f7f1f9);color:#49374e;box-shadow:0 3px 0 #d9cddd,0 5px 10px rgba(37,19,43,.035)}.button-alt:hover,.button-quiet:hover,button.button-quiet:hover,a.button-quiet:hover{background:#f2e8f5;color:#392541;transform:translateY(2px);box-shadow:0 1px 0 #d9cddd}.button-danger,button.button-danger{border-color:#a62a37;background:linear-gradient(180deg,#ed646d,#c73542);box-shadow:0 3px 0 #97232e;color:#fff}.button-small,.button.button-small{min-height:35px;padding:7px 11px;border-radius:9px;font-size:12px}.primary-link{margin-top:4px}a.primary-link,a.button,a.button-alt,a.button-quiet{text-decoration:none}
/* Inputs and filters */
.filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:13px;margin-bottom:19px;padding:17px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}.filters label,.auth-card label,.support-quick-form label,.support-page-form label,.support-reply-form label{display:flex;flex-direction:column;gap:7px;color:#514357;font-size:12px;font-weight:750}.filters .search-label{flex:1 1 220px;min-width:0}input,select,textarea{width:100%;max-width:100%;min-width:0;min-height:43px;padding:10px 12px;border:1px solid #ded4e4;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;outline:none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}input::placeholder,textarea::placeholder{color:#a397ab}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(199,45,131,.11)}textarea{min-height:100px;resize:vertical;line-height:1.6}input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--accent)}input[type=hidden]{display:none}.reset{padding:10px 6px;font-size:13px}.field{display:block;width:100%;max-width:100%;padding:10px 12px;border:1px solid #ded4e4;border-radius:10px;margin:6px 0 14px;box-sizing:border-box}
/* Auth */
.auth-card{width:min(calc(100% - 32px),440px);margin:7vh auto;padding:30px;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:var(--shadow-lg)}.auth-card h1{font-size:29px}.auth-card form{display:grid;gap:16px;margin-top:24px}.auth-card button,.auth-card input[type=submit]{width:100%}.auth-card .muted{margin-top:18px;font-size:12px}
/* Alerts */
.alert,.success,.notice{margin:12px 0;padding:12px 14px;border:1px solid transparent;border-radius:11px;font-size:13px}.alert,.notice.error,.error{border-color:#f3cccc;background:var(--danger-bg);color:var(--danger)}.success,.notice:not(.error){border-color:#c9e9d4;background:var(--success-bg);color:var(--success)}
/* Service and provider management */
.provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}.provider-card,.service-row,.user-card{min-width:0;max-width:100%;padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}.provider-card form{display:inline-block;margin:5px 5px 0 0}.service-row{margin:12px 0}.service-top{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}.service-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:13px}.service-form form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;max-width:100%}.service-form label{display:block;min-width:130px;color:var(--ink-soft);font-size:12px;font-weight:750}.service-form input:not([type=checkbox]){width:150px;max-width:100%}.badge{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid #c9e9d4;border-radius:999px;background:var(--success-bg);color:var(--success);font-size:11px;font-weight:800}.badge.off{border-color:#e2dbe5;background:#f2eff4;color:#65596b}.bulkbar{position:sticky;bottom:8px;z-index:5;display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.97);box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}.bulkbar label{font-size:12px}.bulkbar select,.bulkbar input{padding:9px;border:1px solid #ddd;border-radius:8px}.bulkbar input[type=checkbox],.service-form input[type=checkbox]{width:auto;min-height:0}.service-row{scroll-margin-top:20px}.select-tools{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.form-card{max-width:760px;margin-right:auto;margin-left:auto}.rate{color:var(--muted);font-size:13px}
/* Tables */
.table-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch}table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;text-align:left}th,td{padding:14px 16px;border-bottom:1px solid #f0ebf3;vertical-align:middle}th{background:#fbf8fc;color:#74687a;font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}td{color:var(--ink-soft);font-size:13px}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:#fdf9fc}td small{display:block;max-width:280px;margin-top:3px;color:var(--muted);font-size:11px}td form{margin:0}td button,td input[type=submit],td .primary-link{min-height:35px;padding:7px 11px;font-size:12px}.url-cell{max-width:260px;overflow-wrap:anywhere}.empty{padding:38px;color:var(--muted);text-align:center}
/* Status badges */
.status-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.status-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:currentColor}.status-pending{border-color:#f0dfa8;background:var(--warning-bg);color:var(--warning)}.status-processing,.status-progress{border-color:#ccdcfa;background:var(--info-bg);color:var(--info)}.status-completed{border-color:#c4e9d0;background:var(--success-bg);color:var(--success)}.status-partial{border-color:#dfcef4;background:#f3eafd;color:#7540a5}.status-canceled,.status-failed{border-color:#f2cccc;background:var(--danger-bg);color:var(--danger)}.status-unknown{border-color:#e0d9e4;background:#f2eff4;color:#65596b}
/* Floating customer support widget and conversation */
.support-float{position:fixed!important;right:20px!important;left:auto!important;bottom:20px!important;top:auto!important;z-index:9999!important;font-size:14px;isolation:isolate;max-width:calc(100vw - 24px)}.support-launch{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:12px 18px;border:1px solid #a51f69;border-radius:999px;background:linear-gradient(145deg,#e94ca0,#ad1e6b);color:#fff;box-shadow:0 4px 0 #82134f,0 10px 24px rgba(136,18,82,.22)}.support-launch:hover{color:#fff}.support-launch-icon{font-size:18px}.support-popover{position:absolute;right:0;bottom:67px;width:min(92vw,360px);max-height:min(75vh,620px);overflow-y:auto;padding:17px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-lg)}.support-popover[hidden]{display:none!important}.support-popover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line)}.support-popover-head strong,.support-popover-head small{display:block}.support-popover-head small{margin-top:4px;color:var(--muted);font-size:12px}.support-close{flex:0 0 35px;width:35px;min-height:35px;padding:0;border:1px solid var(--line);border-radius:10px;background:#f8f1f8;color:var(--ink);box-shadow:none;font-size:21px}.support-close:hover{background:var(--accent-light);color:var(--accent-dark);box-shadow:none;transform:none}.support-quick-form,.support-page-form,.support-reply-form{display:grid;gap:12px;margin-top:15px}.support-quick-form input,.support-quick-form textarea,.support-page-form input,.support-page-form textarea,.support-reply-form textarea{width:100%;min-width:0}.support-send{width:100%}.support-view-link{display:block;margin-top:13px;text-align:center;font-size:12px;font-weight:800}.support-layout{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr);gap:18px;align-items:start}.support-thread-list{display:grid;gap:9px;margin-top:12px}.support-thread-link{display:grid;gap:5px;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);overflow-wrap:anywhere}.support-thread-link:hover,.support-thread-link.active{border-color:#e9c4da;background:var(--accent-light);text-decoration:none}.support-thread-link strong{overflow-wrap:anywhere}.thread-meta,.support-thread-link small{color:var(--muted);font-size:12px}.support-list-title{margin-top:25px}.conversation-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.conversation-top h2{overflow-wrap:anywhere}.message-list{display:grid;gap:12px;margin-top:18px}.message-bubble{max-width:92%;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#fbf8fc;overflow-wrap:anywhere}.message-bubble.from-admin{margin-left:auto;border-color:#edc7dd;background:#fbedf5}.message-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:11px}.message-bubble p{margin:8px 0 0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.support-conversation .button-quiet{white-space:nowrap}.admin-support-layout{margin-top:18px}.support-page-form button,.support-reply-form button{justify-self:start}
@media(max-width:760px){.topbar{min-height:65px;padding:11px 15px;gap:12px}.topbar .brand,.brand{gap:8px;font-size:18px}.topbar .brand::before,.brand::before{flex-basis:34px;width:34px;height:34px;border-radius:10px;font-size:18px}.container{padding:24px 15px 100px}.page-heading{align-items:flex-start;flex-direction:column;gap:12px}.count-card{width:100%;min-width:0;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.filters{align-items:stretch;flex-direction:column;gap:12px;padding:14px}.filters .search-label{flex-basis:auto;min-width:0}.filters button,.filters input[type=submit]{width:100%}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.stat-card,.count-card,.panel-card{padding:15px}.stat-card strong{font-size:24px}.auth-card{margin:5vh auto;padding:23px}.support-layout{grid-template-columns:minmax(0,1fr)}.support-float{right:13px;bottom:13px}.support-launch{min-height:48px;padding:11px 15px}.support-popover{right:0;bottom:61px;width:min(92vw,360px)}.message-bubble{max-width:100%}.conversation-top{flex-direction:column}.conversation-top form{align-self:flex-start}.table-wrap{max-width:calc(100vw - 30px)}.service-top{flex-direction:column}.service-form form{width:100%}.service-form label{flex:1 1 130px}.service-form input:not([type=checkbox]){width:100%}.bulkbar{position:static}.provider-card form{display:block;margin:8px 0 0}.provider-card form button{width:100%}.select-tools>*{flex:1 1 140px}.topbar nav{width:min(86vw,330px)}}
@media(max-width:420px){.topbar .brand{font-size:16px}.menu-toggle{min-width:43px;min-height:42px;padding:9px 11px}.container{padding-right:12px;padding-left:12px}.stat-grid{gap:9px}.stat-card{padding:12px}.stat-card strong{font-size:21px}.auth-card{width:calc(100% - 24px);padding:20px}.support-float{right:10px;bottom:10px}.support-launch{min-height:46px;padding:10px 13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Final interaction safeguards: visible hamburger and floating chat on every viewport */
.topbar{position:relative;display:flex;align-items:center;gap:12px}
.topbar>.menu-toggle{order:3}
.topbar>.brand{order:1}
.topbar>nav{order:2}
.hamburger{display:flex;flex-direction:column;gap:5px;width:23px;height:18px;justify-content:center}
.hamburger i{display:block;width:23px;height:2px;min-height:2px;border-radius:2px;background:#a31f69;transition:transform .18s ease,opacity .18s ease}
.menu-toggle[aria-expanded="true"] .hamburger i:first-child{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .hamburger i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .hamburger i:last-child{transform:translateY(-7px) rotate(-45deg)}
.support-float .support-launch{cursor:pointer}
.support-float .support-popover{z-index:10000}
@media(max-width:760px){.support-float{right:12px!important;left:auto!important;bottom:12px!important;top:auto!important}.topbar>.menu-toggle{order:3}}

.order-service-picker{display:grid;grid-template-columns:1fr;gap:12px;margin:4px 0 16px;padding:17px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#fff,#fcf7fb)}
.order-service-picker label{display:flex;flex-direction:column;gap:6px;font-weight:750;color:var(--ink-soft)}
.order-service-picker .field{margin:0}
.order-service-picker select:disabled{background:#f4f0f5;color:#817588}
.support-float .support-launch{border:1px solid #9f1b64;background:linear-gradient(145deg,#e84c9f 0%,#b32270 70%,#98195e 100%);box-shadow:0 4px 0 #79134b,0 12px 28px rgba(128,20,79,.28);font-weight:800;letter-spacing:.01em}
.support-float .support-launch:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 5px 0 #79134b,0 15px 30px rgba(128,20,79,.3)}
.support-float .support-popover{width:min(92vw,380px);padding:0;overflow:hidden;border:1px solid #eadce8;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(32,15,35,.24)}
.support-popover-head{padding:17px 18px;background:linear-gradient(135deg,#fff6fb,#fbedf5);border-bottom:1px solid #f0dce8}
.support-popover-head strong{font-size:16px;color:#35213a;letter-spacing:-.02em}
.support-popover-head small{font-size:12px;color:#7d6c80}
.support-quick-form{padding:0 18px 16px;margin-top:14px}
.support-quick-form label{gap:6px;font-size:12px;color:#4f3d54}
.support-quick-form input,.support-quick-form textarea{border-color:#e4d6e3;background:#fff}
.support-quick-form textarea{min-height:86px}
.support-float .support-send{min-height:44px;border:0;border-radius:11px;background:linear-gradient(145deg,#df3d94,#a91b67);color:#fff;font-weight:800;box-shadow:0 3px 0 #7e124c}
.support-float .support-view-link{margin:0;padding:13px 18px 16px;border-top:1px solid #f0e6ef;background:#fcf9fc;color:#a31f69}
.support-intro{padding:0 18px;color:var(--muted);font-size:13px}
.support-inbox-link{display:flex;align-items:center;justify-content:space-between;margin:15px 18px 18px;padding:12px 14px;border-radius:11px;background:linear-gradient(145deg,#df3d94,#a91b67);color:#fff;font-weight:800}
.support-inbox-link:hover{color:#fff;filter:brightness(1.04)}
.support-close{cursor:pointer}
@media(max-width:760px){.order-service-picker{padding:13px}.support-float .support-popover{width:min(92vw,380px);max-height:calc(100dvh - 115px);overflow-y:auto}}

.topbar.drawer-active{z-index:103}
.topbar.drawer-active>.menu-toggle{position:relative;z-index:104}