/* MailCheck FCP — Navigation v1.0
   Verwendet Tabler-Icons (Webfont muss zusätzlich geladen werden) */

.mc-nav{
  position:sticky;top:0;z-index:1000;
  background:#1a1a2e;color:#fff;
  display:flex;align-items:center;
  height:60px;padding:0 20px;gap:12px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;
}

/* Brand */
.mc-nav-brand{
  display:flex;align-items:center;gap:8px;
  color:#fff;text-decoration:none;
  margin-right:20px;flex-shrink:0;
}
.mc-nav-brand i{font-size:22px;color:#7da3d4}
.mc-nav-brand-name{font-weight:500;font-size:15px;letter-spacing:-0.01em}
.mc-nav-brand-tag{
  font-size:10px;padding:2px 6px;
  background:rgba(255,255,255,0.12);
  border-radius:4px;color:#b8c4d6;
  letter-spacing:0.5px;font-weight:500;
}

/* Item-Group */
.mc-nav-items{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0}
.mc-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:8px}

/* Links */
.mc-nav-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;font-size:13px;
  color:rgba(255,255,255,0.78);text-decoration:none;
  border-radius:6px;
  transition:background .15s,color .15s;
  cursor:pointer;white-space:nowrap;
  border:none;background:transparent;font-family:inherit;
}
.mc-nav-link i{font-size:16px;flex-shrink:0}
.mc-nav-link:hover{color:#fff;background:rgba(255,255,255,0.08)}
.mc-nav-link.active{color:#fff;background:rgba(255,255,255,0.12)}
.mc-nav-icon-only{padding:7px 10px}
.mc-nav-icon-only span{display:none}
.mc-nav-chev{font-size:14px !important;opacity:0.7;margin-left:2px;transition:transform .15s}

.mc-nav-sep{width:1px;height:20px;background:rgba(255,255,255,0.15)}

/* Dropdown */
.mc-nav-dropdown{position:relative}
.mc-nav-dropdown .mc-nav-submenu{
  position:absolute;top:calc(100% + 2px);left:0;
  background:#1a1a2e;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:8px;
  min-width:240px;padding:6px;
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .12s,transform .12s,visibility .12s;
  z-index:1001;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.mc-nav-dropdown:hover .mc-nav-submenu,
.mc-nav-dropdown.open .mc-nav-submenu{
  visibility:visible;opacity:1;transform:translateY(0);
}
.mc-nav-dropdown:hover .mc-nav-chev,
.mc-nav-dropdown.open .mc-nav-chev{transform:rotate(180deg)}

/* Submenu-Items */
.mc-nav-subitem{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:5px;
  color:rgba(255,255,255,0.85);text-decoration:none;
  transition:background .12s;
}
.mc-nav-subitem:hover{background:rgba(255,255,255,0.08);color:#fff}
.mc-nav-subitem.active{background:rgba(125,163,212,0.18);color:#fff}
.mc-nav-subitem > i{font-size:18px;opacity:0.7;flex-shrink:0}
.mc-nav-subitem.active > i{color:#7da3d4;opacity:1}
.mc-nav-subitem-body{display:flex;flex-direction:column;min-width:0}
.mc-nav-subitem-title{font-size:13px;font-weight:500}
.mc-nav-subitem-sub{font-size:11px;opacity:0.65;margin-top:1px}

/* User-Bereich */
.mc-nav-user{margin-left:0}
.mc-nav-user-trigger{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;
  border-radius:20px;
  background:rgba(255,255,255,0.08);
  border:none;color:#fff;cursor:pointer;
  font-family:inherit;font-size:14px;
}
.mc-nav-user-trigger:hover{background:rgba(255,255,255,0.14)}
.mc-nav-avatar{
  width:26px;height:26px;border-radius:50%;
  background:#378ADD;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex-shrink:0;
}
.mc-nav-username{font-size:12px;font-weight:500;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mc-nav-user-menu{right:0;left:auto;min-width:240px}
.mc-nav-user-info{padding:10px 12px 6px}
.mc-nav-user-name{font-size:13px;font-weight:500;color:#fff;word-break:break-all}
.mc-nav-user-role{font-size:11px;color:rgba(255,255,255,0.55);margin-top:2px}
.mc-nav-user-sep{height:1px;background:rgba(255,255,255,0.12);margin:4px 0}
.mc-nav-user-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:5px;
  color:rgba(255,255,255,0.85);text-decoration:none;
  font-size:13px;
}
.mc-nav-user-item i{font-size:16px;opacity:0.75}
.mc-nav-user-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.mc-nav-user-logout{color:#f4a4a4}
.mc-nav-user-logout:hover{background:rgba(244,164,164,0.12);color:#ff8c8c}

/* Burger (Mobile) */
.mc-nav-burger{
  display:none;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:6px;
  border:none;background:rgba(255,255,255,0.08);color:#fff;cursor:pointer;
}
.mc-nav-burger i{font-size:20px}
.mc-nav-burger:hover{background:rgba(255,255,255,0.14)}

/* Mobile-Layout (< 900px) */
@media (max-width:900px){
  .mc-nav{padding:0 12px;height:56px}
  .mc-nav-brand{margin-right:0}
  .mc-nav-brand-tag{display:none}
  .mc-nav-username{display:none}
  .mc-nav-user-trigger{padding:3px;border-radius:50%;background:transparent}
  .mc-nav-user-trigger .mc-nav-chev{display:none}
  .mc-nav-user-trigger:hover{background:rgba(255,255,255,0.08)}
  .mc-nav-burger{display:flex}
  .mc-nav-items{
    position:absolute;top:56px;left:0;right:0;
    background:#1a1a2e;
    border-bottom:1px solid rgba(255,255,255,0.15);
    flex-direction:column;align-items:stretch;
    gap:0;padding:8px;margin:0;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s,transform .15s,visibility .15s;
    max-height:calc(100vh - 56px);overflow-y:auto;
  }
  .mc-nav-items.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .mc-nav-link{width:100%;padding:12px 14px;font-size:14px;border-radius:6px}
  .mc-nav-link i{font-size:18px}
  .mc-nav-dropdown{width:100%}
  .mc-nav-dropdown .mc-nav-submenu{
    position:static;
    border:none;box-shadow:none;
    background:rgba(255,255,255,0.04);
    margin:2px 0 6px 24px;
    padding:4px;
    transform:none;
    visibility:hidden;opacity:0;
    display:none;
    transition:none;
  }
  .mc-nav-dropdown.open .mc-nav-submenu{
    visibility:visible;opacity:1;display:block;
  }
  .mc-nav-dropdown:hover .mc-nav-submenu{
    visibility:hidden;opacity:0;display:none;
  }
  .mc-nav-dropdown.open .mc-nav-submenu{
    visibility:visible;opacity:1;display:block;
  }
  .mc-nav-subitem{padding:10px 12px}
  .mc-nav-icon-only{padding:12px 14px}
  .mc-nav-icon-only span{display:inline}
  .mc-nav-icon-only::after{content:" Info";font-size:14px}
  .mc-nav-icon-only i + ::after,
  .mc-nav-icon-only i{vertical-align:middle}
  /* User-Menü als Vollbreite-Dropdown anzeigen */
  .mc-nav-user .mc-nav-submenu{
    position:absolute;top:56px;right:0;left:auto;
    width:280px;border-radius:0 0 0 12px;
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    background:#1a1a2e;
    transform:translateY(-10px);
    transition:opacity .15s,transform .15s,visibility .15s;
  }
  .mc-nav-user.open .mc-nav-submenu{transform:translateY(0)}
  .mc-nav-sep{display:none}
}

/* Sehr kleine Screens (< 480px) */
@media (max-width:480px){
  .mc-nav{padding:0 8px}
  .mc-nav-brand-name{font-size:14px}
  .mc-nav-brand i{font-size:20px}
}