/* MARUFWIFI_RESELLER_SIDEBAR_V3: colorful soft-square icons */
#side {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
#side > .nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(190,211,241,.45) transparent;
}
#side > .nav > button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  flex: 0 0 auto;
  text-align: left;
}
#side > .nav > button .mw-icon,
#side > #logout .mw-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 8px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#side > .nav > button[data-page="home"] .mw-icon {color:#77b8ff;background:#1e456f;}
#side > .nav > button[data-page="vouchers"] .mw-icon {color:#66d8e8;background:#154756;}
#side > .nav > button[data-page="create"] .mw-icon {color:#c4a1ff;background:#40345f;}
#side > .nav > button[data-page="download"] .mw-icon {color:#94baff;background:#293e69;}
#side > .nav > button[data-page="resetmac"] .mw-icon {color:#ffaaa2;background:#623a43;}
#side > .nav > button[data-page="macbinding"] .mw-icon {color:#70dec5;background:#205246;}
#side > .nav > button[data-page="pppoe"] .mw-icon {color:#a6df80;background:#35533c;}
#side > .nav > button[data-page="pppoe-expire"] .mw-icon {color:#ffd078;background:#634d2a;}
#side > .nav > button[data-page="mikrotik"] .mw-icon {color:#7ed2ff;background:#254b67;}
#side > .nav > button[data-page="usage"] .mw-icon {color:#c4a9ff;background:#433963;}
#side > .nav > button[data-page="billing"] .mw-icon {color:#ffd383;background:#63502c;}
#side > .nav > button[data-page="profile"] .mw-icon {color:#a8baff;background:#394666;}
#side > .nav > button.active .mw-icon {color:#fff;background:rgba(255,255,255,.17);}
#side > #logout .mw-icon {color:#c0d3e9;background:#2b415c;}
#side > .nav > button .mw-label { min-width: 0; }
#side > #logout {
  position: static;
  inset: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  flex: 0 0 auto;
  margin: 12px 0 0;
  box-sizing: border-box;
}

/* Profile photo replaces the decorative M without shifting the sidebar. */
.side-brand::before { content:none; display:none; }
.side-brand .reseller-avatar-button {
  position:absolute;
  top:7px;
  left:0;
  width:46px;
  height:46px;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:0;
  border-radius:14px;
  color:#fff;
  font:900 22px/1 system-ui,sans-serif;
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  box-shadow:0 10px 24px rgba(37,99,235,.38);
  cursor:pointer;
}
.side-brand .reseller-avatar-button:hover { filter:brightness(1.12); }
.side-brand .reseller-avatar-button:focus-visible { outline:2px solid #fff;outline-offset:3px; }
.side-brand .reseller-avatar-button img { width:100%;height:100%;object-fit:cover; }
.side-brand .reseller-avatar-button [hidden] { display:none; }
.reseller-avatar-settings {
  margin:0 0 20px;
  padding:14px 15px 13px;
  border:1px solid #e0e8f4;
  border-radius:14px;
  background:linear-gradient(135deg,#f8fbff,#f2f7ff);
}
.reseller-avatar-settings-heading {
  margin-bottom:12px;
  color:#132a4e;
  font-weight:700;
  font-size:14px;
}
.reseller-avatar-settings-heading span {
  display:block;
  margin-top:4px;
  color:#64748b;
  font-weight:400;
  font-size:12px;
}
.reseller-avatar-actions { display:flex;gap:9px;flex-wrap:wrap; }
.reseller-avatar-actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:9px;
  font:600 12px/1.2 system-ui,sans-serif;
  cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease;
}
.reseller-avatar-actions button:focus-visible { outline:2px solid #2563eb;outline-offset:2px; }
.reseller-avatar-actions button:disabled { opacity:.6;cursor:wait; }
.reseller-avatar-actions button svg {
  width:16px;
  height:16px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.reseller-avatar-actions .reseller-avatar-upload {
  color:#fff;
  background:#2563eb;
  box-shadow:0 4px 10px rgba(37,99,235,.17);
}
.reseller-avatar-actions .reseller-avatar-upload:hover { background:#1d4ed8; }
.reseller-avatar-actions .reseller-avatar-remove {
  color:#b42336;
  border-color:#f6dce0;
  background:#fff;
}
.reseller-avatar-actions .reseller-avatar-remove:hover { background:#fff1f2; }
.reseller-avatar-actions button[hidden] { display:none; }
#resellerAvatarMessage { min-height:1.3em;margin-top:9px;font-size:12px;color:#475569; }