:root { --bg-main:#1e1e1e; --bg-card:#2b2b2b; --bg-card-hover:#333; --bg-input:#333; --text:#e0e0e0; --text-muted:#999; --border:#444; --accent:#4a9eff; --prio-high:#e74c3c; --prio-normal:#2ecc71; --prio-low:#95a5a6; --status-open:#4a9eff; --status-answer:#f39c12; --status-done:#2ecc71; }
body { background:var(--bg-main); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif; margin:0; font-size:15px; }
/* Nav */
.cockpit-nav { background:#181818; border-bottom:1px solid var(--border); padding:0 16px; display:flex; align-items:center; gap:0; position:sticky; top:0; z-index:100; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cockpit-nav .brand { color:var(--accent); font-weight:700; font-size:17px; padding:10px 16px 10px 0; border-right:1px solid var(--border); margin-right:4px; white-space:nowrap; }
.cockpit-nav a { color:var(--text-muted); text-decoration:none; padding:10px 14px; font-size:14px; border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap; }
.cockpit-nav a:hover { color:var(--text); background:#222; }
.cockpit-nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
.cockpit-nav a i { margin-right:5px; }
.page-container { max-width:1400px; margin:0 auto; padding:12px 16px; }
/* Filter bar */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.filter-bar input,.filter-bar select { background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:6px 10px; font-size:14px; min-height:34px; }
.filter-bar input:focus,.filter-bar select:focus { outline:none; border-color:var(--accent); }
.filter-bar .btn-filter { background:var(--accent); color:#fff; border:none; border-radius:4px; padding:6px 14px; cursor:pointer; font-size:14px; min-height:34px; }
.filter-toggle { display:none; }
.search-wrap { position:relative; display:inline-flex; align-items:center; }
.search-wrap input { padding-right:28px; }
.search-wrap .clear-btn { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; padding:0 2px; display:none; }
.search-wrap input:not(:placeholder-shown) ~ .clear-btn { display:block; }
.count-label { font-size:13px; color:var(--text-muted); white-space:nowrap; margin-left:4px; }
.summary-bar { display:flex; gap:16px; margin-bottom:12px; font-size:14px; color:var(--text-muted); flex-wrap:wrap; }
.summary-bar b { color:var(--text); }
/* Table */
table.data-table { width:100%; border-collapse:collapse; font-size:14px; }
table.data-table thead { background:#222; position:sticky; top:42px; z-index:10; }
table.data-table th { padding:8px 10px; text-align:left; color:var(--text-muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
table.data-table td { padding:6px 10px; border-bottom:1px solid #333; vertical-align:middle; }
table.data-table tr:hover { background:var(--bg-card-hover); }
table.data-table tr.bold td { font-weight:700; }
table.data-table tr { cursor:pointer; }
table.data-table tr.selected { background:var(--accent)22; outline:1px solid var(--accent)44; }
.prio-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.prio-dot.high { background:var(--prio-high); }
.prio-dot.normal { background:var(--prio-normal); }
.prio-dot.low { background:var(--prio-low); }
.status-badge { display:inline-block; padding:2px 8px; border-radius:3px; font-size:12px; font-weight:600; }
.status-badge.offen { background:var(--status-open); color:#fff; }
.status-badge.antwort-kunde,.status-badge.antwort-von-kunde { background:var(--status-answer); color:#fff; }
.status-badge.antwort-an-kunde { background:#8e44ad; color:#fff; }
.status-badge.erledigt { background:var(--status-done); color:#fff; }
.status-badge.in-bearbeitung { background:#3498db; color:#fff; }
.status-badge.warten,.status-badge.wartet-auf-jemanden { background:#7f8c8d; color:#fff; }
.domain-tag { display:inline-block; padding:1px 6px; border-radius:3px; font-size:11px; margin-right:4px; color:#fff; }
/* Host cards */
.host-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:12px; cursor:pointer; }
.host-card.online { border-left:3px solid var(--prio-normal); }
.host-card.offline { border-left:3px solid var(--prio-high); opacity:.7; }
.host-card.selected { outline:2px solid var(--accent); }
.host-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px; }
.host-card h4 { margin:0 0 6px; font-size:15px; }
.host-card .meta { font-size:13px; color:var(--text-muted); }
.host-card .metrics { display:flex; gap:12px; margin-top:8px; font-size:13px; }
.host-card .metric { text-align:center; }
.host-card .metric-val { font-size:18px; font-weight:700; }
.host-card .metric-val.warn { color:var(--status-answer); }
.host-card .metric-val.crit { color:var(--prio-high); }
/* Detail modal - draggable */
.detail-modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.7); z-index:200; }
.detail-modal.open { display:flex; justify-content:center; align-items:flex-start; padding-top:30px; overflow-y:auto; }
.detail-content { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; width:94%; max-width:900px; max-height:90vh; overflow-y:auto; margin-bottom:30px; position:relative; box-sizing:border-box; }
.detail-content.wide { max-width:1000px; }
.dlg-titlebar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#222; border-radius:8px 8px 0 0; cursor:grab; user-select:none; touch-action:none; flex-wrap:wrap; min-height:44px; }
.dlg-titlebar:active { cursor:grabbing; }
.dlg-titlebar h3 { margin:0; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.dlg-titlebar .tb-actions { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.dlg-titlebar > .close-x { margin-left:auto; flex-shrink:0; }
.tb-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:5px 10px; border:none; border-radius:4px; cursor:pointer; font-size:12px; font-family:inherit; min-width:32px; min-height:32px; }
.tb-btn i { font-size:13px; }
.tb-btn.primary { background:var(--accent); color:#fff; }
.tb-btn.success { background:var(--prio-normal); color:#fff; }
.tb-btn.secondary { background:#555; color:var(--text); }
.tb-btn.danger-outline { background:none; border:1px solid var(--prio-high); color:var(--prio-high); }
.tb-btn.danger-outline:hover { background:var(--prio-high); color:#fff; }
.tb-btn.close-x { background:#ff5f57; color:#fff; font-size:14px; padding:0; width:28px; height:28px; min-width:28px; min-height:28px; border-radius:50%; line-height:1; font-weight:700; }
.tb-btn.close-x:hover { background:#e0443d; opacity:1; }
.tb-btn:hover { opacity:.85; }
.tb-btn .btn-text { display:inline; }
.dlg-body { padding:16px 20px; }
.dlg-footer { display:flex; align-items:center; padding:10px 20px; border-top:1px solid var(--border); }
.dlg-footer .btn-delete-outline { background:none; border:1px solid var(--prio-high); color:var(--prio-high); border-radius:4px; padding:5px 10px; cursor:pointer; font-size:12px; font-family:inherit; display:inline-flex; align-items:center; gap:4px; min-height:32px; }
.dlg-footer .btn-delete-outline:hover { background:var(--prio-high); color:#fff; }
/* Confirm dialog */
.confirm-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); z-index:300; justify-content:center; align-items:center; }
.confirm-overlay.open { display:flex; }
.confirm-box { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:24px; text-align:center; min-width:300px; max-width:400px; }
.confirm-box p { margin:0 0 20px; font-size:15px; }
.confirm-box .confirm-btns { display:flex; gap:10px; justify-content:center; }
.confirm-box .confirm-btns button { min-width:100px; min-height:40px; }
/* Form grid */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:12px 0; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-group { display:flex; flex-direction:column; gap:3px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:12px; color:var(--text-muted); font-weight:600; }
.form-group input,.form-group select,.form-group textarea { background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:6px 8px; font-size:14px; font-family:inherit; box-sizing:border-box; width:100%; max-width:100%; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--accent); }
.form-group input[type=color] { height:36px; padding:2px; cursor:pointer; }
/* Buttons */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border:none; border-radius:4px; cursor:pointer; font-size:13px; font-family:inherit; min-height:34px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-success { background:var(--prio-normal); color:#fff; }
.btn-secondary { background:#555; color:var(--text); }
.btn-danger { background:var(--prio-high); color:#fff; }
.btn:hover { opacity:.85; }
.btn-bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.btn-bar-right { margin-left:auto; }
/* Tabs inside modal */
.modal-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin:0; }
.modal-tabs button { background:none; border:none; color:var(--text-muted); padding:8px 16px; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; font-family:inherit; }
.modal-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-pane { display:none; padding-top:12px; }
.tab-pane.active { display:block; }
/* Quill dark theme */
.ql-toolbar.ql-snow { background:#222; border-color:var(--border) !important; flex-wrap:wrap; }
.ql-container.ql-snow { border-color:var(--border) !important; background:var(--bg-input); color:var(--text); font-size:14px; }
.ql-editor { min-height:80px; }
.ql-container.ql-small .ql-editor { max-height:200px; overflow-y:auto; }
.ql-snow .ql-stroke { stroke:var(--text-muted) !important; }
.ql-snow .ql-fill { fill:var(--text-muted) !important; }
.ql-snow .ql-picker-label { color:var(--text-muted) !important; }
.ql-snow .ql-picker-options { background:var(--bg-card) !important; border-color:var(--border) !important; }
.billing-offen { color:var(--status-answer); }
.billing-bezahlt,.billing-berechnet { color:var(--prio-normal); }
.billing-pauschale { color:var(--accent); }
/* Metric bar */
.metric-bar { background:#444; border-radius:3px; height:8px; width:100%; margin-top:2px; }
.metric-bar-fill { height:100%; border-radius:3px; }
/* Host detail info grid */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; font-size:13px; }
.info-grid dt { color:var(--text-muted); font-weight:600; }
.info-grid dd { margin:0; }
/* Mobile card view */
.mobile-cards { display:none; }
.mobile-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:10px 12px; margin-bottom:6px; cursor:pointer; position:relative; }
.mobile-card.selected { outline:2px solid var(--accent); background:var(--accent)11; }
.mobile-card .mc-line1 { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-card .mc-line2 { font-size:12px; color:var(--text-muted); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }
/* Mobile */
@media(max-width:600px) {
  html,body { overflow-x:hidden; }
  .cockpit-nav .brand { font-size:14px; padding:8px 10px 8px 0; }
  .cockpit-nav a { padding:8px 10px; font-size:12px; }
  .cockpit-nav a .nav-text { display:none; }
  .cockpit-nav a i { margin:0; font-size:16px; }
  .page-container { padding:8px 10px; overflow-x:hidden; }
  .filter-bar { gap:4px; }
  .filter-bar input,.filter-bar select { font-size:13px; padding:5px 8px; min-width:0; flex:1 1 45%; box-sizing:border-box; }
  .filter-toggle { display:inline-flex; align-items:center; gap:4px; background:#555; color:var(--text); border:none; border-radius:4px; padding:6px 10px; cursor:pointer; font-size:13px; font-family:inherit; }
  .filter-bar.collapsed > *:not(.filter-toggle):not(.search-wrap):not(.count-label):not(.btn-filter) { display:none; }
  table.data-table { display:none; }
  .mobile-cards { display:block; }
  .summary-bar { font-size:13px; gap:10px; }
  .detail-modal.open { padding-top:0; }
  .detail-content,.detail-content.wide { width:100vw; max-width:100vw; max-height:100vh; border-radius:0; margin:0; height:100vh; overflow-x:hidden; }
  .dlg-titlebar { border-radius:0; cursor:default; gap:4px; padding:8px 10px; }
  .dlg-titlebar h3 { font-size:13px; flex:1 1 0; min-width:0; }
  .dlg-titlebar > .close-x { order:1; }
  .dlg-titlebar .tb-actions { order:2; flex:0 0 100%; }
  .tb-btn .btn-text { display:none; }
  .tb-btn { min-width:40px; min-height:40px; padding:8px; }
  .tb-btn.close-x { width:36px; height:36px; min-width:36px; min-height:36px; font-size:16px; }
  .dlg-body { padding:12px 10px; overflow-x:hidden; }
  .dlg-footer { padding:10px; }
  .form-grid { grid-template-columns:1fr; gap:8px; }
  .form-grid.cols-3 { grid-template-columns:1fr; }
  .form-group input,.form-group select,.form-group textarea { width:100%; box-sizing:border-box; min-width:0; }
  .ql-toolbar.ql-snow { flex-wrap:wrap; padding:4px; }
  .ql-snow .ql-formats { margin-right:4px; }
  .ql-container.ql-snow { max-width:100%; }
  .host-grid { grid-template-columns:1fr; }
  .info-grid { grid-template-columns:1fr 1fr; }
  .confirm-box { min-width:0; width:90vw; max-width:90vw; }
  .search-wrap { flex:1 1 100%; min-width:0; }
  .search-wrap input { width:100%; box-sizing:border-box; min-width:0; }
  .modal-tabs button { padding:8px 10px; font-size:12px; }
}
.ctx-menu{position:fixed;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:500;min-width:200px;padding:4px 0;font-size:13px;}
.ctx-menu div{padding:6px 14px;cursor:pointer;}
.ctx-menu div:hover{background:var(--bg-hover);}
.ctx-menu hr{margin:2px 0;border:none;border-top:1px solid var(--border);}
.ctx-sub{position:relative;}.ctx-submenu{display:none;position:absolute;left:100%;top:-4px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.3);min-width:160px;padding:4px 0;z-index:501;max-height:300px;overflow-y:auto;}
.ctx-sub:hover>.ctx-submenu{display:block;}.ctx-submenu div{padding:6px 14px;cursor:pointer;white-space:nowrap;}.ctx-submenu div:hover{background:var(--bg-hover);}
.data-table tr.multi-sel td{background:rgba(52,152,219,.18);}
.mobile-card.multi-sel{outline:2px solid var(--accent);outline-offset:-2px;}
.mobile-ctx-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:4px 8px;display:none;}
@media(max-width:768px){.mobile-ctx-btn{display:block;}}