/* ================================================================
   ByteNetworks Child Theme — custom.css
   Parent: Nexus (WHMCS 9 / Bootstrap 4)
   Version: 2.0
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --bn-primary:       #0066cc;
    --bn-primary-dark:  #004fa3;
    --bn-primary-light: #dbeafe;
    --bn-accent:        #00aaff;
    --bn-dark:          #0d1117;
    --bn-surface:       #ffffff;
    --bn-bg:            #f0f4f9;
    --bn-border:        #dee2e8;
    --bn-text:          #1e293b;
    --bn-muted:         #64748b;
    --bn-radius:        8px;
    --bn-radius-lg:     12px;
    --bn-shadow:        0 2px 12px rgba(0,0,0,.08);
    --bn-shadow-md:     0 6px 24px rgba(0,102,204,.12);
    --font-head:        'Outfit', system-ui, sans-serif;
    --font-body:        'DM Sans', system-ui, sans-serif;
}

/* ================================================================
   BASE
   ================================================================ */
body {
    font-family: var(--font-body) !important;
    background-color: var(--bn-bg) !important;
    color: var(--bn-text) !important;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    color: var(--bn-dark) !important;
}
a { color: var(--bn-primary); }
a:hover { color: var(--bn-primary-dark); text-decoration: none; }
.content-wrapper, #main-content, .container-main { padding-top: 24px; padding-bottom: 48px; }

/* ================================================================
   HEADER / NAVBAR
   ================================================================ */
header, #header, .header-wrapper {
    background: #fff !important;
    border-bottom: 1px solid var(--bn-border) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
}
.navbar, nav.navbar {
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    min-height: 56px !important;
}
.navbar-brand { padding: 8px 0 !important; }
.navbar-brand img { max-height: 38px !important; width: auto !important; }

/* Nav Links — maximale Spezifität */
a.nav-link,
.nav-link,
.navbar-nav a.nav-link,
.navbar-nav .nav-item a,
.navbar-nav li a,
header nav a,
header .navbar-nav a {
    color: #1e293b !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: .85rem !important;
}
a.nav-link:hover,
.nav-link:hover,
.navbar-nav a.nav-link:hover,
.navbar-nav .nav-item.show > a,
.navbar-nav .nav-item.active > a {
    color: #0066cc !important;
    text-decoration: none !important;
}
.navbar-nav > .nav-item > .nav-link {
    padding: 16px 13px !important;
    white-space: nowrap;
}
.navbar-nav > .nav-item.active > .nav-link {
    position: relative;
    color: #0066cc !important;
}
.navbar-nav > .nav-item.active > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 12px; right: 12px;
    height: 2px;
    background: #0066cc;
    border-radius: 2px 2px 0 0;
}
.navbar-nav .dropdown-toggle::after { opacity: .45; margin-left: 4px; }

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--bn-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.10) !important;
    padding: 6px !important;
    margin-top: 0 !important;
    min-width: 200px !important;
    animation: bnDrop .14s ease both;
}
@keyframes bnDrop {
    from { opacity:0; transform:translateY(-5px); }
    to   { opacity:1; transform:translateY(0); }
}
.dropdown-item {
    font-family: var(--font-body) !important;
    font-size: .875rem !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    transition: background .12s, color .12s !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: #dbeafe !important;
    color: #0066cc !important;
}
.dropdown-divider { border-color: #f0f4f9 !important; margin: 4px 0 !important; }
@media (max-width: 991px) {
    .navbar-collapse { border-top: 1px solid var(--bn-border) !important; padding: 10px 0 14px !important; }
    .navbar-nav > .nav-item > .nav-link { padding: 10px 16px !important; }
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
nav[aria-label="breadcrumb"], .breadcrumb-wrapper {
    background: transparent !important;
    padding: 10px 0 14px !important;
}
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: .78rem !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none !important;
}
.breadcrumb-item a {
    color: var(--bn-primary) !important;
    font-family: var(--font-head) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: var(--bn-primary-light);
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .75rem !important;
    transition: background .15s, color .15s;
}
.breadcrumb-item a:hover {
    background: #0066cc !important;
    color: #fff !important;
}
.breadcrumb-item.active {
    color: var(--bn-muted) !important;
    font-size: .75rem !important;
    font-family: var(--font-head) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "›" !important;
    color: #cbd5e1 !important;
    font-size: .9rem !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

/* ================================================================
   ALERTS
   ================================================================ */
.alert {
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: .875rem !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px !important;
    font-family: var(--font-body) !important;
}
.alert-warning {
    background: #fffbeb !important;
    color: #78350f !important;
    border-left: 4px solid #f59e0b !important;
}
.alert-success {
    background: #f0fdf4 !important;
    color: #14532d !important;
    border-left: 4px solid #22c55e !important;
}
.alert-danger, .alert-error {
    background: #fef2f2 !important;
    color: #7f1d1d !important;
    border-left: 4px solid #ef4444 !important;
}
.alert-info {
    background: #eff6ff !important;
    color: #1e3a5f !important;
    border-left: 4px solid #3b82f6 !important;
}
.alert .close { opacity:.4 !important; font-size:1.1rem !important; margin-left:auto !important; background:none !important; border:none !important; }
.alert .close:hover { opacity:.7 !important; }
.alert .btn { font-size:.78rem !important; padding:5px 12px !important; border-radius:6px !important; align-self:center; flex-shrink:0; }
.alert-warning .btn { background:#fff !important; border:1.5px solid #f59e0b !important; color:#92400e !important; }
.alert-warning .btn:hover { background:#f59e0b !important; color:#fff !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    font-family: var(--font-head) !important;
    font-weight: 500 !important;
    border-radius: var(--bn-radius) !important;
    transition: all .18s ease !important;
    position: relative;
}
.btn-primary {
    background: linear-gradient(135deg, #0077ee, #0055bb) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,102,204,.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #0088ff, #0066cc) !important;
    box-shadow: 0 4px 16px rgba(0,102,204,.4) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-default, .btn-secondary {
    background: #fff !important;
    border: 1.5px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
}
.btn-default:hover, .btn-secondary:hover {
    border-color: var(--bn-primary) !important;
    color: var(--bn-primary) !important;
    background: var(--bn-primary-light) !important;
}
.btn-success { background: linear-gradient(135deg,#22c55e,#16a34a) !important; border:none !important; color:#fff !important; }
.btn-danger  { background: linear-gradient(135deg,#ef4444,#dc2626) !important; border:none !important; color:#fff !important; }
.btn-lg { padding: 12px 28px !important; font-size: .95rem !important; border-radius: var(--bn-radius-lg) !important; }
.btn-sm { padding: 5px 12px !important; font-size: .8rem !important; }

/* ================================================================
   CARDS & PANELS
   ================================================================ */
.card, .panel {
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-shadow) !important;
    background: var(--bn-surface) !important;
    transition: box-shadow .2s !important;
}
.card-header, .panel-heading {
    background: #f8faff !important;
    border-bottom: 1px solid var(--bn-border) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 14px 20px !important;
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    font-size: .93rem !important;
}
.card-body, .panel-body { padding: 20px !important; }
.card-footer, .panel-footer {
    background: #f8faff !important;
    border-top: 1px solid var(--bn-border) !important;
    padding: 12px 20px !important;
}

/* ================================================================
   FORMS
   ================================================================ */
.form-control {
    border: 1.5px solid var(--bn-border) !important;
    border-radius: var(--bn-radius) !important;
    font-family: var(--font-body) !important;
    font-size: .9rem !important;
    color: var(--bn-text) !important;
    height: 42px !important;
    padding: 8px 14px !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.form-control:focus {
    border-color: var(--bn-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,102,204,.10) !important;
    outline: none !important;
}
textarea.form-control { height: auto !important; }
label, .col-form-label {
    font-family: var(--font-head) !important;
    font-weight: 500 !important;
    font-size: .85rem !important;
    color: var(--bn-text) !important;
}
.input-group-text {
    background: #f8faff !important;
    border: 1.5px solid var(--bn-border) !important;
    color: var(--bn-muted) !important;
}

/* ================================================================
   TABLES
   ================================================================ */
.table thead th {
    font-family: var(--font-head) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--bn-muted) !important;
    background: #f8faff !important;
    border-bottom: 2px solid var(--bn-border) !important;
    padding: 12px 16px !important;
    border-top: none !important;
}
.table td {
    padding: 13px 16px !important;
    vertical-align: middle !important;
    font-size: .875rem !important;
    border-color: #f0f4f9 !important;
}
.table tbody tr:hover td { background: #f0f6ff !important; }

/* ================================================================
   BADGES & LABELS
   ================================================================ */
.badge, .label {
    font-family: var(--font-head) !important;
    font-weight: 500 !important;
    font-size: .7rem !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}
.badge-success, .label-success  { background:#dcfce7 !important; color:#15803d !important; }
.badge-danger,  .label-danger   { background:#fee2e2 !important; color:#dc2626 !important; }
.badge-primary, .label-primary  { background:var(--bn-primary-light) !important; color:var(--bn-primary) !important; }
.badge-warning, .label-warning  { background:#fef9c3 !important; color:#ca8a04 !important; }
.badge-default, .label-default,
.badge-secondary                { background:#f1f5f9 !important; color:var(--bn-muted) !important; }

/* ================================================================
   SIDEBAR (Nexus left sidebar — Ihre Information, Kontakte etc.)
   ================================================================ */
.list-group-item {
    border: none !important;
    border-radius: var(--bn-radius) !important;
    margin-bottom: 2px !important;
    padding: 10px 16px !important;
    font-family: var(--font-body) !important;
    font-size: .875rem !important;
    color: var(--bn-text) !important;
    background: transparent !important;
    transition: background .15s, color .15s, transform .15s !important;
}
.list-group-item:hover {
    background: var(--bn-primary-light) !important;
    color: var(--bn-primary) !important;
    transform: translateX(3px);
}
.list-group-item.active, .list-group-item.active:hover {
    background: var(--bn-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    transform: none;
}

/* ================================================================
   PAGINATION
   ================================================================ */
.page-link {
    border: 1.5px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    border-radius: var(--bn-radius) !important;
    margin: 0 2px !important;
    font-family: var(--font-head) !important;
    font-size: .82rem !important;
    transition: all .15s !important;
}
.page-item.active .page-link, .page-link:hover {
    background: var(--bn-primary) !important;
    border-color: var(--bn-primary) !important;
    color: #fff !important;
}

/* ================================================================
   MODAL
   ================================================================ */
.modal-content { border:none !important; border-radius:18px !important; box-shadow:0 20px 60px rgba(0,0,0,.15) !important; overflow:hidden; }
.modal-header  { background:#f8faff !important; border-bottom:1px solid var(--bn-border) !important; padding:16px 22px !important; }
.modal-title   { font-family:var(--font-head) !important; font-weight:600 !important; }
.modal-body    { padding:22px !important; }
.modal-footer  { border-top:1px solid var(--bn-border) !important; padding:12px 22px !important; }

/* ================================================================
   LOGIN
   ================================================================ */
.bn-login-page {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.bn-login-box { width: 100%; max-width: 420px; }
.bn-login-logo { text-align: center; margin-bottom: 24px; }
.bn-login-logo img { max-height: 46px; width: auto; }
.bn-login-logo-text { font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:var(--bn-primary); }
.bn-login-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--bn-border);
    box-shadow: 0 8px 40px rgba(0,102,204,.10);
    padding: 36px 32px;
}
.bn-login-card .btn-primary { width:100%; height:46px; font-size:.95rem !important; font-weight:600 !important; margin-top:6px; }
.bn-login-title { font-family:var(--font-head) !important; font-weight:700 !important; font-size:1.3rem !important; color:var(--bn-dark) !important; text-align:center; margin-bottom:4px !important; }
.bn-login-subtitle { text-align:center; color:var(--bn-muted); font-size:.875rem; margin-bottom:28px; display:block; }
.bn-login-card .form-control { height:46px !important; }
.bn-login-card label { font-size:.78rem !important; text-transform:uppercase !important; letter-spacing:.06em !important; color:var(--bn-muted) !important; }
.bn-login-footer { text-align:center; margin-top:20px; font-size:.85rem; color:var(--bn-muted); }
.bn-login-footer a { color:var(--bn-primary); font-weight:500; }

/* ================================================================
   FOOTER
   ================================================================ */
.bn-footer {
    background: #fff;
    border-top: 1px solid var(--bn-border);
    padding: 40px 0 0;
    margin-top: 60px;
}
.bn-footer-brand { font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--bn-dark); margin-bottom:10px; }
.bn-footer-desc  { color:var(--bn-muted); font-size:.82rem; line-height:1.7; }
.bn-footer-heading { font-family:var(--font-head) !important; font-weight:600 !important; font-size:.68rem !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#94a3b8 !important; margin-bottom:12px !important; }
.bn-footer-links { list-style:none; padding:0; margin:0; }
.bn-footer-links li { margin-bottom:7px; }
.bn-footer-links a { color:var(--bn-muted) !important; font-size:.85rem !important; text-decoration:none !important; transition:color .15s !important; display:inline-block; }
.bn-footer-links a:hover { color:var(--bn-primary) !important; }
.bn-footer-bottom { border-top:1px solid var(--bn-border); margin-top:36px; padding:16px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.75rem; color:#94a3b8; }

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.bn-reveal { opacity:0; transform:translateY(14px); transition:opacity .38s ease, transform .38s ease; }
.bn-reveal.visible { opacity:1; transform:none; }

/* ================================================================
   DASHBOARD — clientareahome
   ================================================================ */

/* Hero Banner */
.bn-dash-hero {
    background: linear-gradient(135deg, #0d1117 0%, #0a2a5e 55%, #0066cc 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.bn-dash-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.bn-dash-hero::after {
    content: '';
    position: absolute;
    top:-60px; right:-60px;
    width:260px; height:260px;
    background: radial-gradient(circle, rgba(0,170,255,.15) 0%, transparent 70%);
    pointer-events: none;
}
.bn-dash-hero-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.bn-dash-greeting { font-family:var(--font-head); font-size:1.55rem; font-weight:700; color:#fff; line-height:1.2; margin-bottom:4px; }
.bn-dash-name { color: #60b3ff; }
.bn-dash-date { font-size:.82rem; color:rgba(255,255,255,.5); font-family:var(--font-body); }
.bn-dash-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.bn-hero-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 8px;
    font-family: var(--font-head); font-weight: 500; font-size: .85rem;
    text-decoration: none !important; transition: all .18s ease; white-space: nowrap;
}
.bn-hero-btn--primary { background:#0066cc; color:#fff !important; box-shadow:0 2px 10px rgba(0,102,204,.4); }
.bn-hero-btn--primary:hover { background:#0077ee; box-shadow:0 4px 16px rgba(0,102,204,.5); transform:translateY(-1px); color:#fff !important; }
.bn-hero-btn--outline { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff !important; }
.bn-hero-btn--outline:hover { background:rgba(255,255,255,.18); color:#fff !important; }

/* Stat Cards */
.bn-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.bn-stat-card {
    background: #fff; border: 1px solid var(--bn-border); border-radius: 14px;
    padding: 18px 20px; display: flex; align-items: center; gap: 14px;
    text-decoration: none !important; transition: box-shadow .18s ease, transform .18s ease;
}
.bn-stat-card:hover { box-shadow: 0 6px 24px rgba(0,102,204,.12); transform: translateY(-2px); }
.bn-stat-icon {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.bn-stat-icon--blue   { background:#eff6ff; color:#3b82f6; }
.bn-stat-icon--teal   { background:#f0fdfa; color:#14b8a6; }
.bn-stat-icon--purple { background:#fdf4ff; color:#a855f7; }
.bn-stat-icon--amber  { background:#fffbeb; color:#f59e0b; }
.bn-stat-body { flex:1; min-width:0; }
.bn-stat-num { font-family:var(--font-head); font-weight:700; font-size:1.6rem; color:var(--bn-dark); line-height:1; }
.bn-stat-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--bn-muted); margin-top:3px; }
.bn-stat-arrow { color:#cbd5e1; font-size:.75rem; flex-shrink:0; transition:transform .15s, color .15s; }
.bn-stat-card:hover .bn-stat-arrow { color:var(--bn-primary); transform:translateX(3px); }

/* Dashboard main panels */
.bn-dash-main { display:flex; flex-direction:column; }
.bn-dash-main .bn-panel { margin-bottom: 20px; }

/* Panel */
.bn-panel {
    background: #fff;
    border: 1px solid var(--bn-border);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
    transition: box-shadow .2s;
}
.bn-panel:hover { box-shadow: 0 4px 20px rgba(0,102,204,.08); }
.bn-panel-header {
    padding: 16px 22px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; border-bottom: 1px solid #f0f4f9;
    user-select: none; transition: background .15s;
}
.bn-panel-header:hover { background: #fafbff; }
.bn-panel-header--static { cursor: default; }
.bn-panel-header--static:hover { background: transparent; }
.bn-panel-title { display:flex; align-items:center; gap:13px; }
.bn-panel-icon {
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0;
}
.bn-panel-icon--blue   { background:#eff6ff; color:#3b82f6; }
.bn-panel-icon--teal   { background:#f0fdfa; color:#14b8a6; }
.bn-panel-icon--purple { background:#fdf4ff; color:#a855f7; }
.bn-panel-icon--amber  { background:#fffbeb; color:#f59e0b; }
.bn-panel-name { font-family:var(--font-head); font-weight:600; font-size:.93rem; color:var(--bn-dark); line-height:1.2; }
.bn-panel-sub  { font-size:.75rem; color:var(--bn-muted); margin-top:2px; font-family:var(--font-body); }
.bn-panel-header-right { display:flex; align-items:center; gap:14px; }
.bn-panel-link {
    font-family:var(--font-head); font-size:.78rem; font-weight:500;
    color:var(--bn-primary) !important; text-decoration:none !important;
    display:flex; align-items:center; gap:5px; white-space:nowrap;
    padding:5px 10px; border-radius:6px; transition:background .15s;
}
.bn-panel-link:hover { background:var(--bn-primary-light); }
.bn-panel-chevron { color:#cbd5e1; font-size:.8rem; transition:transform .22s ease; }
.bn-panel-header.collapsed .bn-panel-chevron,
.bn-panel-header[aria-expanded="false"] .bn-panel-chevron { transform:rotate(-180deg); }
.bn-panel-body { padding:0; }
.bn-panel-footer-link {
    display:flex; align-items:center; justify-content:center; gap:7px;
    padding:11px; border-top:1px solid #f0f4f9;
    font-family:var(--font-head); font-size:.8rem; font-weight:500;
    color:var(--bn-primary) !important; text-decoration:none !important; transition:background .15s;
}
.bn-panel-footer-link:hover { background:#f8faff; }

/* Service / Domain Rows */
.bn-service-row {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 22px; border-bottom: 1px solid #f5f8fc; transition: background .15s;
}
.bn-service-row:last-child { border-bottom: none; }
.bn-service-row:hover { background: #f8faff; }
.bn-service-status-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dot-active    { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.dot-suspended { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.dot-other     { background:#94a3b8; }
.bn-service-info { flex:1; min-width:0; }
.bn-service-name { font-family:var(--font-head); font-weight:600; font-size:.88rem; color:var(--bn-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-service-domain { font-size:.75rem; color:var(--bn-muted); margin-top:2px; }
.bn-service-meta { flex-shrink:0; }
.bn-service-due { font-size:.75rem; color:var(--bn-muted); white-space:nowrap; display:flex; align-items:center; gap:5px; flex-shrink:0; }
.bn-service-actions { display:flex; gap:7px; flex-shrink:0; }

/* Action Buttons */
.bn-action-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 11px; border-radius:6px;
    font-family:var(--font-head); font-size:.75rem; font-weight:500;
    text-decoration:none !important; transition:all .15s ease;
    border:1.5px solid var(--bn-border); color:var(--bn-text) !important; background:#fff;
    white-space:nowrap;
}
.bn-action-btn:hover { border-color:var(--bn-primary); color:var(--bn-primary) !important; background:var(--bn-primary-light); }
.bn-action-btn--primary { background:var(--bn-primary); border-color:var(--bn-primary); color:#fff !important; }
.bn-action-btn--primary:hover { background:#0077ee; border-color:#0077ee; color:#fff !important; }

/* Custom Badges (Dashboard) */
.bn-badge {
    font-family:var(--font-head); font-size:.65rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:6px; white-space:nowrap;
}
.bn-badge--green  { background:#dcfce7; color:#15803d; }
.bn-badge--red    { background:#fee2e2; color:#dc2626; }
.bn-badge--gray   { background:#f1f5f9; color:#64748b; }
.bn-badge--blue   { background:#dbeafe; color:#1d4ed8; }
.bn-badge--teal   { background:#ccfbf1; color:#0f766e; }
.bn-badge--amber  { background:#fef9c3; color:#92400e; }

/* Empty State */
.bn-empty-state { text-align:center; padding:36px 20px; color:var(--bn-muted); }
.bn-empty-state i { font-size:2rem; opacity:.25; display:block; margin-bottom:10px; }
.bn-empty-state p { font-size:.875rem; margin:0; color:var(--bn-muted); }

/* Domain Suche */
.bn-domain-search-bar { padding:14px 22px; border-top:1px solid #f0f4f9; background:#fafbff; }
.bn-domain-search-form {
    display:flex; align-items:center;
    background:#fff; border:1.5px solid var(--bn-border); border-radius:10px; overflow:hidden;
    transition:border-color .18s, box-shadow .18s;
}
.bn-domain-search-form:focus-within { border-color:var(--bn-primary); box-shadow:0 0 0 3px rgba(0,102,204,.08); }
.bn-domain-search-icon { padding:0 12px; color:#94a3b8; font-size:.875rem; flex-shrink:0; }
.bn-domain-input {
    flex:1; border:none !important; outline:none !important; box-shadow:none !important;
    height:42px !important; font-size:.875rem !important; color:var(--bn-text) !important;
    background:transparent !important; padding:0 !important; font-family:var(--font-body) !important;
}
.bn-domain-btn {
    height:42px; padding:0 18px; background:var(--bn-primary); color:#fff;
    border:none; font-family:var(--font-head); font-weight:600; font-size:.82rem;
    cursor:pointer; transition:background .15s; white-space:nowrap; flex-shrink:0;
}
.bn-domain-btn:hover { background:#0077ee; }

/* Ticket Rows */
.bn-ticket-row {
    display:flex; align-items:center; gap:12px; padding:12px 22px;
    border-bottom:1px solid #f5f8fc; text-decoration:none !important; transition:background .15s;
}
.bn-ticket-row:last-child { border-bottom:none; }
.bn-ticket-row:hover { background:#f8faff; }
.bn-ticket-info { flex:1; min-width:0; }
.bn-ticket-subject { font-family:var(--font-head); font-weight:500; font-size:.85rem; color:var(--bn-dark) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-ticket-meta { font-size:.72rem; color:var(--bn-muted); margin-top:2px; }

/* News Rows */
.bn-news-row {
    display:flex; align-items:center; gap:14px; padding:13px 22px;
    border-bottom:1px solid #f5f8fc; text-decoration:none !important; transition:background .15s;
}
.bn-news-row:last-child { border-bottom:none; }
.bn-news-row:hover { background:#f8faff; }
.bn-news-icon { width:36px; height:36px; border-radius:10px; background:#fffbeb; color:#f59e0b; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.bn-news-body { flex:1; min-width:0; }
.bn-news-title { font-family:var(--font-head); font-weight:500; font-size:.875rem; color:var(--bn-dark) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn-news-date { font-size:.72rem; color:var(--bn-muted); margin-top:3px; display:flex; align-items:center; gap:5px; }
.bn-news-arrow { color:#cbd5e1; font-size:.72rem; flex-shrink:0; transition:transform .15s, color .15s; }
.bn-news-row:hover .bn-news-arrow { color:var(--bn-primary); transform:translateX(2px); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 991px) {
    .bn-stat-row { grid-template-columns: repeat(2, 1fr); }
    .bn-dash-hero-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 576px) {
    .bn-stat-row { grid-template-columns: 1fr 1fr; gap:10px; }
    .bn-dash-hero { padding:22px 18px; }
    .bn-dash-greeting { font-size:1.25rem; }
    .bn-service-actions { flex-direction:column; gap:4px; }
    .bn-login-card { padding:24px 18px; }
    .bn-footer { padding:36px 0 0; margin-top:40px; }
}

/* ================================================================
   LOGIN — Nexus-eigene Struktur überschreiben (kein login.tpl)
   ================================================================ */

/* Nexus Login-Container zentrieren */
.login-page,
body.login #main-body,
body[class*="login"] .container > .row,
.login-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 70vh !important;
    padding: 40px 16px !important;
}

/* Login Panel/Card */
.login-page .panel,
.login-page .card,
body[class*="login"] .panel,
.form-login,
#login-panel {
    border: 1px solid var(--bn-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 40px rgba(0,102,204,.10) !important;
    overflow: hidden !important;
    max-width: 440px !important;
    width: 100% !important;
}

/* Login Panel-Header */
.login-page .panel-heading,
.login-page .card-header,
body[class*="login"] .panel-heading {
    background: linear-gradient(135deg, #0d1117, #0a2a5e) !important;
    border: none !important;
    padding: 28px 32px 24px !important;
    text-align: center !important;
    border-radius: 18px 18px 0 0 !important;
}
.login-page .panel-heading h3,
.login-page .panel-heading .panel-title,
body[class*="login"] .panel-heading h3 {
    color: #fff !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    margin: 0 !important;
}

/* Login Panel-Body */
.login-page .panel-body,
.login-page .card-body,
body[class*="login"] .panel-body {
    padding: 28px 32px !important;
    background: #fff !important;
}

/* Login Inputs */
.login-page .form-control,
body[class*="login"] .form-control {
    height: 46px !important;
    border: 1.5px solid var(--bn-border) !important;
    border-radius: 8px !important;
    font-size: .9rem !important;
    transition: border-color .18s, box-shadow .18s !important;
}
.login-page .form-control:focus,
body[class*="login"] .form-control:focus {
    border-color: var(--bn-primary) !important;
    box-shadow: 0 0 0 3px rgba(0,102,204,.10) !important;
}

/* Login Button */
.login-page .btn-primary,
body[class*="login"] .btn-primary {
    width: 100% !important;
    height: 46px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
}

/* Logo über dem Login-Panel */
.login-page .text-center img,
.login-page .logo,
body[class*="login"] .navbar-brand img {
    max-height: 48px !important;
    width: auto !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* ================================================================
   FOOTER — Volle Breite (aus Nexus-Container ausbrechen)
   ================================================================ */
.bn-footer {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}