:root {
    --bg: #111;
    --bg2: #1a1a1a;
    --bg3: #222;
    --card: #1e1e1e;
    --elevated: #222;
    --border: #2e2e2e;
    --green: #39ff6a;
    --green-dark: #28c44f;
    --green-dim: rgba(57,255,106,0.08);
    --text: #f0f0f0;
    --text2: #aaa;
    --text3: #555;
    --red: #ff4d4d;
    --orange: #ff9f43;
    --blue: #5b8af7;
    --radius: 10px;
    --shadow: 0 4px 24px rgba(0,0,0,0.4);
    --topbar-h: 54px;
    --subnav-h: 42px;
}
body.light {
    --bg: #f0f2f5;
    --bg2: #ffffff;
    --bg3: #e8eaed;
    --card: #ffffff;
    --elevated: #ffffff;
    --border: #d1d5db;
    --green: #16a34a;
    --green-dark: #15803d;
    --green-dim: rgba(22,163,74,0.08);
    --text: #111827;
    --text2: #6b7280;
    --text3: #9ca3af;
    --red: #dc2626;
    --orange: #d97706;
    --blue: #2563eb;
    --shadow: 0 2px 12px rgba(0,0,0,0.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.5;}
a{color:var(--green);text-decoration:none;}
a:hover{color:var(--green-dark);}

/* ── TOP NAVBAR ─────────────────────────────────────── */
.topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 0;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: visible !important;
}
.topnav-brand {
    font-size: 16px;
    font-weight: 900;
    color: var(--green);
    letter-spacing: -.5px;
    white-space: nowrap;
    padding-right: 16px;
    border-right: 1px solid var(--border);
    margin-right: 8px;
    flex-shrink: 0;
}
.topnav-brand span { color: var(--text2); font-weight: 400; }
.topnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow: visible;
}
/* topnav itself handles scroll on very small screens */
.topnav { overflow-x: auto; overflow-y: visible; }
.topnav-links::-webkit-scrollbar { display: none; }
span.topnav-item { cursor: pointer; }
.topnav-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text2);
    white-space: nowrap;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    position: relative;
}
.topnav-item:hover, .topnav-item.active {
    background: var(--green-dim);
    color: var(--green);
}
.topnav-item .icon { font-size: 15px; }
.topnav-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}
/* Dropdown */
.topnav-dropdown { position: relative; }
.topnav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: var(--shadow);
    z-index: 300;
    padding: 4px;
}
.topnav-dropdown:hover .topnav-dropdown-menu,
.topnav-dropdown.open .topnav-dropdown-menu { display: block; }
.topnav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text2);
    transition: all .15s;
}
.topnav-dropdown-menu a:hover { background: var(--green-dim); color: var(--green); }
.topnav-dropdown-menu .menu-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text3);
    padding: 8px 12px 4px;
    font-weight: 600;
}
.topnav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}
.topnav-user {
    font-size: 12px;
    color: var(--text2);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── NAV DROPDOWN MENUS ─────────────────────────────── */
details { list-style: none; position: relative; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > .dd-menu { display: block; }
.dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 999;
    padding: 4px;
    white-space: nowrap;
}
.dd-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 7px;
    font-size: 13px; color: var(--text2);
    transition: all .12s;
}
.dd-menu a:hover { background: var(--green-dim); color: var(--green); }
.dd-section {
    font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--text3); padding: 8px 14px 4px; font-weight: 600;
}
summary.topnav-item { cursor: pointer; user-select: none; }

/* ── THEME TOGGLE ───────────────────────────────────── */
.theme-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text2);
    width: 34px; height: 34px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--green); color: var(--green); }

/* ── MOBILE HAMBURGER ────────────────────────────────── */
.hamburger {
    display: none;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    bottom: 0;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    z-index: 190;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 80px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mobile-menu.open { display: block; }
.mobile-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 20px;
    color: var(--text2); font-size: 14px;
    border-left: 3px solid transparent;
    transition: all .15s;
}
.mobile-menu a:hover, .mobile-menu a.active {
    background: var(--green-dim); color: var(--green);
    border-left-color: var(--green);
}
.mobile-menu .msection {
    padding: 10px 20px 4px;
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .8px; color: var(--text3); font-weight: 600;
}

/* ── MAIN CONTENT ────────────────────────────────────── */
.app-body {
    margin-top: calc(var(--topbar-h) + 1px);
    min-height: calc(100vh - var(--topbar-h));
    padding: 22px;
}

/* ── TILES ───────────────────────────────────────────── */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .15s;text-decoration:none;color:var(--text);}
.tile:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 6px 20px rgba(57,255,106,0.1);color:var(--text);}
body.light .tile:hover{box-shadow:0 6px 20px rgba(22,163,74,0.1);}
.tile-icon{font-size:26px;width:44px;height:44px;background:var(--green-dim);border-radius:9px;display:flex;align-items:center;justify-content:center;}
.tile-label{font-weight:700;font-size:13.5px;}
.tile-sub{font-size:12px;color:var(--text2);}
.tile-count{font-size:22px;font-weight:800;color:var(--green);}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:none;white-space:nowrap;text-decoration:none;}
.btn-primary{background:var(--green);color:#111;}
.btn-primary:hover{background:var(--green-dark);color:#111;}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--green);color:var(--green);}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;}
.btn-outline{background:transparent;color:var(--green);border:1px solid var(--green);}
.btn-outline:hover{background:var(--green);color:#111;}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-xs{padding:3px 8px;font-size:11.5px;border-radius:5px;}

/* ── FORMS ───────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-grid.cols-1{grid-template-columns:1fr;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group.span-2{grid-column:span 2;}
.form-group.span-3{grid-column:span 3;}
label{font-size:11.5px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;}
input,select,textarea{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px 11px;font-size:14px;font-family:inherit;transition:border-color .15s;width:100%;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);}
textarea{resize:vertical;min-height:80px;}
select option{background:var(--bg3);}

/* ── CARDS ───────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--border);}
.card-title{font-size:14.5px;font-weight:700;}

/* ── TABLES ──────────────────────────────────────────── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;padding:9px 11px;background:var(--bg3);color:var(--text2);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,0.02);}
body.light tr:hover td{background:rgba(0,0,0,0.015);}

/* ── BADGES ──────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-green{background:rgba(57,255,106,0.15);color:var(--green);}
.badge-orange{background:rgba(255,159,67,0.15);color:var(--orange);}
.badge-red{background:rgba(255,77,77,0.15);color:var(--red);}
.badge-blue{background:rgba(91,138,247,0.15);color:var(--blue);}
.badge-gray{background:rgba(255,255,255,0.08);color:var(--text2);}
body.light .badge-gray{background:rgba(0,0,0,0.06);}

/* ── ALERTS ──────────────────────────────────────────── */
.alert{padding:11px 15px;border-radius:7px;margin-bottom:14px;font-size:13px;border-left:3px solid;}
.alert-success{background:rgba(57,255,106,0.08);border-color:var(--green);color:var(--green);}
.alert-error{background:rgba(255,77,77,0.08);border-color:var(--red);color:var(--red);}
.alert-info{background:rgba(91,138,247,0.08);border-color:var(--blue);color:var(--blue);}

/* ── SPLIT LAYOUT ────────────────────────────────────── */
.split-layout{display:grid;grid-template-columns:1fr 290px;gap:16px;align-items:flex-start;}

/* ── CALENDAR WIDGET ─────────────────────────────────── */
.cal-widget{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:sticky;top:calc(var(--topbar-h) + 16px);}
.cal-widget-header{background:var(--bg3);padding:11px 13px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--green);border-bottom:1px solid var(--border);}
.cal-events{padding:4px 0;max-height:65vh;overflow-y:auto;}
.cal-event{padding:9px 13px;border-bottom:1px solid var(--border);transition:background .1s;}
.cal-event:last-child{border-bottom:none;}
.cal-event:hover{background:var(--green-dim);}
.cal-event-date{font-size:10.5px;color:var(--green);font-weight:600;margin-bottom:2px;}
.cal-event-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.cal-event-loc{font-size:11px;color:var(--text2);margin-top:2px;}
.cal-empty{padding:18px 13px;text-align:center;color:var(--text3);font-size:13px;}
.cal-error{padding:11px 13px;color:var(--text3);font-size:12px;text-align:center;}

/* ── FILTER ROW ──────────────────────────────────────── */
.filter-row{display:flex;gap:8px;margin-bottom:13px;flex-wrap:wrap;align-items:flex-end;}
.filter-row select,.filter-row input{flex:1;min-width:120px;max-width:190px;}

/* ── LOGIN ───────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;}
.login-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:36px;width:100%;max-width:390px;box-shadow:var(--shadow);}
.login-logo{text-align:center;margin-bottom:26px;}
.login-logo .brand{font-size:22px;font-weight:900;color:var(--green);letter-spacing:-1px;}
.login-logo .sub{font-size:13px;color:var(--text2);margin-top:3px;}
.login-theme-btn{position:fixed;top:14px;right:14px;}

/* ── SCANNER MODAL ───────────────────────────────────── */
#scanner-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;align-items:center;justify-content:center;padding:16px;}
#scanner-modal.active{display:flex;}
#qr-reader{border-radius:8px;overflow:hidden;border:2px solid var(--green);background:#000;}

/* ── MAIL TPL TABS ───────────────────────────────────── */
.tpl-tabs{display:flex;gap:5px;margin-bottom:13px;flex-wrap:wrap;}
.tpl-tab{padding:5px 13px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text2);transition:all .15s;}
.tpl-tab.active{background:var(--green);color:#111;border-color:var(--green);}
.tpl-panel{display:none;}
.tpl-panel.active{display:block;}

/* ── UTILS ───────────────────────────────────────────── */
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mb-16{margin-bottom:16px;}
.flex{display:flex;}.flex-center{display:flex;align-items:center;}.gap-8{gap:8px;}.gap-12{gap:12px;}
.text-sm{font-size:12px;}.text-muted{color:var(--text2);}.text-green{color:var(--green);}.text-red{color:var(--red);}
.fw-bold{font-weight:700;}.w-100{width:100%;}
code{background:var(--bg3);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:12.5px;}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1100px){
    .topnav-links .topnav-item .icon+span{display:none;}
    .topnav-item{padding:6px 8px;}
}
@media(max-width:800px){
    .topnav-links{display:none;}
    .hamburger{display:flex;}
    /* Hide everything in right except theme + hamburger */
    .topnav-user{display:none;}
    .topnav-right a.btn{display:none;}
    .topnav-right{border-left:none;padding-left:0;gap:10px;}
    /* Make topnav brand smaller */
    .topnav-brand{font-size:13px;padding-right:10px;}
    /* Bigger theme button on mobile */
    .theme-btn{width:44px;height:44px;font-size:20px;}
    .split-layout{grid-template-columns:1fr;}
    .cal-widget{position:static;}
    .form-grid{grid-template-columns:1fr;}
    .form-grid.cols-3{grid-template-columns:1fr;}
    .form-group.span-2,.form-group.span-3{grid-column:span 1;}
    .tile-grid{grid-template-columns:repeat(2,1fr);}
    .app-body{padding:14px;}
}
@media(max-width:480px){
    .tile-grid{grid-template-columns:1fr;}
    .login-box{padding:24px 18px;}
    .topnav{padding:0 12px;}
}

/* ── MAP MINI WIDGET ─────────────────────────────────── */
.mini-map-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-top: 6px;
}
.mini-map { height: 180px; width: 100%; background: var(--bg3); }
.mini-map-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg3); color: var(--text2); font-size: 13px;
    pointer-events: none;
}

/* ── DASHBOARD LAYOUT ────────────────────────────────── */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: flex-start;
}
.info-widget-col { display: block; }
@media(max-width:900px) {
    .dashboard-cols { grid-template-columns: 1fr; }
    .info-widget-col { display: none; } /* nur Desktop */
}