/* === components.css === */

/* ============================================
   TABLES
   ============================================ */
.table-card {
  background:var(--card-bg); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  overflow:hidden; margin-bottom:24px; border:1px solid var(--card-border);
}
.table-header {
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.table-header h3 { font-size:15px; font-weight:600; }
.table-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.search-input {
  padding:8px 12px 8px 36px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; font-family:inherit; width:220px; background:var(--card-bg); color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px center;
  transition:var(--transition);
}
.search-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }

.filter-select {
  padding:8px 28px 8px 12px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; font-family:inherit; background:var(--card-bg); cursor:pointer; color:var(--text);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:var(--transition);
}
.filter-select:focus { outline:none; border-color:var(--primary); }

.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:12px 16px; text-align:left; font-size:12px; font-weight:500;
  color:var(--text-muted); letter-spacing:0;
  border-bottom:1px solid var(--border); background:var(--bg-secondary);
  position:sticky; top:0; z-index:1; cursor:pointer; user-select:none;
  transition:var(--transition);
}
thead th:hover { color:var(--text-secondary); background:var(--border-light); }
thead th .sort-icon { margin-left:4px; font-size:9px; opacity:0.4; }
thead th.sorted .sort-icon { opacity:1; color:var(--primary); }
tbody td {
  padding:12px 16px; font-size:13px; border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
tbody tr { cursor:pointer; transition:var(--transition); }
tbody tr:hover { background:rgba(0,0,0,0.02); }
tbody tr .btn-danger { opacity:0; transition:opacity 0.15s; }
tbody tr:hover .btn-danger { opacity:1; }
tbody tr:active { background:rgba(99,102,241,0.06); }
.truncate { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================
   BADGES
   ============================================ */
.badge-channel {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:20px; font-size:11px; font-weight:600;
}
.badge-channel.whatsapp, .badge-channel.telegram, .badge-channel.instagram, .badge-channel.web, .badge-channel.email {
  background:var(--bg-secondary); color:var(--text-secondary);
}
.badge-channel.email { background:rgba(59,130,246,0.12); color:#1d4ed8; }
[data-theme="dark"] .badge-channel { background:var(--bg-secondary); color:var(--text-secondary); }
[data-theme="dark"] .badge-channel.email { background:rgba(59,130,246,0.15); color:#93c5fd; }
[data-theme="dark"] .kpi-card:hover { box-shadow:0 8px 25px rgba(0,0,0,0.3); }
[data-theme="dark"] .chart-card:hover { box-shadow:0 8px 25px rgba(0,0,0,0.3); }
[data-theme="dark"] .dash-time-pill button.active { background:var(--border); }
[data-theme="dark"] .activity-item:hover { background:rgba(255,255,255,0.03); }

.badge-priority {
  display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-priority.low { background:var(--success-light); color:var(--success); }
.badge-priority.medium { background:var(--warning-light); color:var(--warning); }
.badge-priority.high { background:var(--danger-light); color:var(--danger); }
.badge-priority.critical { background:var(--danger); color:#fff; }

.badge-status {
  display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-status.open { background:var(--warning-light); color:var(--warning); }
.badge-status.assigned { background:var(--info-light); color:var(--info); }
.badge-status.resolved { background:var(--success-light); color:var(--success); }
.badge-status.closed { background:var(--bg-secondary); color:var(--text-muted); }

.badge-active { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-active.yes { background:var(--success-light); color:var(--success); }
.badge-active.no { background:var(--danger-light); color:var(--danger); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border-radius:var(--radius); font-size:13px; font-weight:500; cursor:pointer;
  transition:var(--transition); border:none; font-family:inherit; position:relative;
  overflow:hidden;
}
.btn:active { transform:scale(0.97); }
.btn:disabled, .btn[disabled] { opacity:0.5; cursor:not-allowed; pointer-events:none; }
.btn.loading { pointer-events:none; opacity:0.8; }
.btn.loading::after { content:''; width:14px; height:14px; border:2px solid transparent; border-top-color:currentColor; border-radius:50%; animation:spin 0.6s linear infinite; margin-left:4px; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
.btn-outline:hover { background:var(--bg-secondary); border-color:var(--text-muted); color:var(--text); }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-secondary); color:var(--text); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-xs { padding:4px 8px; font-size:11px; }
.btn-icon-only { width:34px; height:34px; padding:0; justify-content:center; }
.btn-icon-only.btn-sm { width:30px; height:30px; }

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.modal-overlay.active { opacity:1; pointer-events:auto; }
.modal {
  background:var(--card-bg); border-radius:var(--radius-lg); width:90%; max-width:640px;
  max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  transform:translateY(20px) scale(0.97); transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  border:1px solid var(--card-border);
}
.modal-overlay.active .modal { transform:translateY(0) scale(1); }
.modal-header {
  padding:20px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--card-bg); z-index:1;
}
.modal-header h3 { font-size:17px; font-weight:600; }
.modal-close {
  width:34px; height:34px; border-radius:var(--radius); border:none; background:var(--bg-secondary);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:var(--transition);
}
.modal-close:hover { background:var(--border); color:var(--text); }
.modal-body { padding:24px; }
.modal-footer {
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
  position:sticky; bottom:0; background:var(--card-bg);
}

/* Slide-over panel */
.slide-over-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(2px);
  z-index:1000; opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.slide-over-overlay.active { opacity:1; pointer-events:auto; }
.slide-over {
  position:fixed; top:0; right:-500px; bottom:0; width:500px; max-width:90vw;
  background:var(--card-bg); box-shadow:var(--shadow-lg); z-index:1001;
  transition:right 0.3s cubic-bezier(0.4,0,0.2,1); overflow-y:auto;
  border-left:1px solid var(--card-border);
}
.slide-over-overlay.active .slide-over { right:0; }
.slide-over-header {
  padding:20px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--card-bg); z-index:1;
}
.slide-over-body { padding:24px; }

/* ============================================
   FORMS
   ============================================ */
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--text); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:14px; font-family:inherit; transition:var(--transition);
  background:var(--card-bg); color:var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow);
}
.form-group textarea { min-height:80px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group .toggle { position:relative; width:44px; height:24px; display:inline-block; }
.form-group .toggle input { opacity:0; width:0; height:0; }
.form-group .toggle .slider {
  position:absolute; inset:0; background:var(--border); border-radius:12px;
  cursor:pointer; transition:var(--transition);
}
.form-group .toggle .slider::before {
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  background:#fff; left:3px; top:3px; transition:var(--transition);
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.form-group .toggle input:checked + .slider { background:var(--success); }
.form-group .toggle input:checked + .slider::before { transform:translateX(20px); }
.form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* Password toggle field */
.password-field { position:relative; }
.password-field input { padding-right:40px; }
.password-field .toggle-pw {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px;
  transition:var(--transition);
}
.password-field .toggle-pw:hover { color:var(--text); }

/* Tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tab-btn {
  padding:10px 18px; font-size:13px; font-weight:500; background:none;
  border:none; border-bottom:2px solid transparent; color:var(--text-muted);
  cursor:pointer; transition:var(--transition); font-family:inherit;
}
.tab-btn:hover { color:var(--text-secondary); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-content { display:none; animation: fadeIn 0.3s ease; }
.tab-content.active { display:block; }

/* ============================================
   TOAST
   ============================================ */
.toast-container {
  position:fixed; bottom:24px; right:24px; z-index:2000; display:flex;
  flex-direction:column-reverse; gap:8px;
}
.toast {
  display:flex; align-items:center; gap:12px; padding:14px 20px; border-radius:var(--radius-md);
  background:var(--card-bg); box-shadow:var(--shadow-lg); min-width:320px; max-width:420px;
  animation:slideInRight 0.3s ease; border:1px solid var(--card-border);
}
.toast.success .toast-icon { color:var(--success); }
.toast.error .toast-icon { color:var(--danger); }
.toast.info .toast-icon { color:var(--info); }
.toast.warning .toast-icon { color:var(--warning); }
.toast-message { flex:1; font-size:13px; font-weight:500; }
.toast-action {
  background:none; border:none; color:var(--primary); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; padding:2px 6px; border-radius:4px;
  transition:var(--transition);
}
.toast-action:hover { background:rgba(99,102,241,0.1); }
.toast-close { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; transition:var(--transition); }
.toast-close:hover { color:var(--text); }

/* ============================================
   LOADING / SPINNER
   ============================================ */
.spinner {
  display:inline-block; width:20px; height:20px; border:2px solid var(--border);
  border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite;
}
.spinner-lg { width:36px; height:36px; border-width:3px; }
.loading-center { display:flex; align-items:center; justify-content:center; padding:60px; flex-direction:column; gap:12px; }
.loading-center .loading-text { font-size:13px; color:var(--text-muted); }

/* Skeleton Loading for Tables */
.skeleton-table { padding:16px; }
.skeleton-table-row {
  display:grid; grid-template-columns:120px 1fr 100px 2fr 2fr 100px; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--border-light);
}
.skeleton-table-row .skeleton-cell { height:14px; border-radius:4px; }

/* ============================================
   DETAIL PANEL
   ============================================ */
.detail-panel {
  background:var(--card-bg); border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  margin-bottom:24px; border:1px solid var(--card-border);
}
.detail-header {
  padding:20px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.detail-header .back-btn {
  background:none; border:none; font-size:13px; color:var(--primary); cursor:pointer;
  display:flex; align-items:center; gap:6px; font-family:inherit; font-weight:600;
  transition:var(--transition);
}
.detail-header .back-btn:hover { color:var(--primary-dark); }
.detail-body { padding:24px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-item { }
.detail-item .label { font-size:12px; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
.detail-item .value { font-size:14px; font-weight:500; }
.detail-row { display:flex; margin-bottom:12px; }
.detail-row .label { width:160px; font-size:13px; color:var(--text-muted); font-weight:500; }
.detail-row .value { flex:1; font-size:13px; }

/* Chat Bubbles */
.chat-thread { padding:16px 0; }
.chat-date-divider {
  text-align:center; padding:12px 0; font-size:12px; color:var(--text-muted); font-weight:500;
  position:relative;
}
.chat-date-divider::before, .chat-date-divider::after {
  content:''; position:absolute; top:50%; height:1px; background:var(--border);
}
.chat-date-divider::before { left:0; right:calc(50% + 60px); }
.chat-date-divider::after { left:calc(50% + 60px); right:0; }
.chat-message {
  display:flex; gap:10px; margin-bottom:8px; max-width:85%;
  animation: fadeInUp 0.2s ease;
}
.chat-message.user { flex-direction:row-reverse; margin-left:auto; }
.chat-avatar {
  width:32px; height:32px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; color:#fff;
}
.chat-bubble {
  padding:12px 16px; border-radius:14px; font-size:13.5px; line-height:1.6;
  position:relative;
}
.chat-message.user .chat-bubble {
  background:var(--primary); color:#fff; border-bottom-right-radius:4px;
}
.chat-message.bot .chat-bubble {
  background:var(--bg-secondary); color:var(--text); border-bottom-left-radius:4px;
  border:1px solid var(--border-light);
}
.chat-meta { font-size:11px; color:var(--text-muted); margin-top:4px; display:flex; align-items:center; gap:6px; }
.chat-message.user .chat-meta { justify-content:flex-end; }

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
  text-align:center; padding:60px 24px; color:var(--text-secondary);
}
.empty-state .empty-icon {
  width:80px; height:80px; margin:0 auto 20px; border-radius:20px;
  background:var(--bg-secondary); display:flex; align-items:center; justify-content:center;
}
.empty-state .empty-icon i { font-size:32px; color:var(--text-muted); }
.empty-state h4 { font-size:17px; font-weight:600; margin-bottom:8px; color:var(--text); }
.empty-state p { font-size:14px; color:var(--text-muted); max-width:400px; margin:0 auto; }
.empty-state .btn { margin-top:16px; }

/* ============================================
   COMMAND PALETTE (Ctrl+K)
   ============================================ */
.cmd-palette-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  z-index:3000; display:flex; align-items:flex-start; justify-content:center;
  padding-top:15vh; opacity:0; pointer-events:none; transition:opacity 0.15s ease;
}
.cmd-palette-overlay.active { opacity:1; pointer-events:auto; }
.cmd-palette {
  width:560px; max-width:90vw; background:var(--card-bg); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--card-border); overflow:hidden;
  transform:scale(0.97) translateY(-8px); transition:all 0.2s ease;
}
.cmd-palette-overlay.active .cmd-palette { transform:scale(1) translateY(0); }
.cmd-palette-input {
  width:100%; padding:16px 20px 16px 48px; border:none; border-bottom:1px solid var(--border);
  font-size:16px; font-family:inherit; background:transparent; color:var(--text);
  outline:none;
}
.cmd-palette-input::placeholder { color:var(--text-muted); }
.cmd-palette .search-icon {
  position:absolute; left:18px; top:18px; color:var(--text-muted); font-size:16px;
}
.cmd-palette-results { max-height:320px; overflow-y:auto; padding:8px; }
.cmd-palette-item {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-radius:var(--radius); cursor:pointer; transition:var(--transition);
}
.cmd-palette-item:hover, .cmd-palette-item.selected { background:var(--bg-secondary); }
.cmd-palette-item i { width:20px; text-align:center; color:var(--text-muted); font-size:14px; }
.cmd-palette-item .cmd-text { flex:1; font-size:14px; font-weight:500; }
.cmd-palette-item .cmd-hint { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
.cmd-palette-footer {
  padding:8px 16px; border-top:1px solid var(--border); display:flex; gap:16px;
  font-size:11px; color:var(--text-muted);
}
.cmd-palette-footer kbd {
  background:var(--bg-secondary); padding:2px 6px; border-radius:4px;
  font-family:var(--font-mono); font-size:10px; border:1px solid var(--border);
}

/* ============================================
   CONFIRM DIALOG
   ============================================ */
.confirm-dialog {
  background:var(--card-bg); border-radius:var(--radius-lg); padding:28px;
  width:400px; max-width:90vw; text-align:center;
  box-shadow:var(--shadow-lg); border:1px solid var(--card-border);
}
.confirm-dialog .confirm-icon { font-size:48px; color:var(--warning); margin-bottom:16px; }
.confirm-dialog h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.confirm-dialog p { font-size:14px; color:var(--text-secondary); margin-bottom:24px; }
.confirm-dialog .confirm-actions { display:flex; gap:8px; justify-content:center; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  border-top:1px solid var(--border);
}
.pagination-info { font-size:12px; color:var(--text-muted); }
.pagination-btns { display:flex; align-items:center; gap:4px; }
.pagination button {
  min-width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card-bg); cursor:pointer; font-size:13px; transition:var(--transition);
  display:flex; align-items:center; justify-content:center; padding:0 8px;
  color:var(--text-secondary); font-family:inherit;
}
.pagination button:hover { background:var(--bg-secondary); color:var(--text); }
.pagination button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination button:disabled { opacity:0.4; cursor:not-allowed; }

/* ============================================
   DSGVO COOKIE BANNER & PRIVACY
   ============================================ */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:10000;
  background:rgba(44,44,46,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.06);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:12px; color:rgba(255,255,255,0.5);
}
.cookie-banner a { color:var(--primary); text-decoration:none; font-weight:500; }
.cookie-banner a:hover { text-decoration:underline; }
.cookie-banner .cookie-actions { display:flex; gap:6px; flex-shrink:0; }
.cookie-banner .btn { font-size:12px; padding:6px 14px; }
.privacy-overlay {
  position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,0.5);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.privacy-overlay.active { display:flex; }
.privacy-content {
  background:var(--card-bg); border-radius:var(--radius-md); max-width:700px; width:100%;
  max-height:80vh; overflow-y:auto; padding:32px; position:relative;
}
.privacy-content h2 { font-size:18px; font-weight:600; margin-bottom:16px; }
.privacy-content h3 { font-size:14px; font-weight:600; margin:20px 0 8px; }
.privacy-content p, .privacy-content li { font-size:13px; line-height:1.7; color:var(--text-secondary); margin-bottom:8px; }
.privacy-content ul { padding-left:20px; }
.privacy-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-muted); }

/* ============================================
   FORM VALIDATION
   ============================================ */
.form-group input.invalid, .form-group textarea.invalid, .form-group select.invalid {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light);
}
.form-group .field-error { color:var(--danger); font-size:12px; margin-top:4px; display:none; }
.form-group input.invalid ~ .field-error,
.form-group textarea.invalid ~ .field-error { display:block; }

/* ============================================
   COMPANY MODAL TABS
   ============================================ */
.co-modal-tabs {
  display:flex; gap:0; border-bottom:1px solid var(--border-light);
  padding:0 24px; flex-shrink:0;
}
.co-tab {
  padding:10px 18px; font-size:13px; font-weight:500; color:var(--text-muted);
  background:none; border:none; border-bottom:2px solid transparent;
  cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:6px;
  font-family:inherit;
}
.co-tab:hover { color:var(--text); background:var(--bg-secondary); }
.co-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.co-tab i { font-size:12px; }
.co-tab-pane { }
.co-channel-card {
  border:1px solid var(--border-light); border-radius:10px; padding:16px;
  margin-bottom:12px; background:var(--card-bg);
}
.co-channel-head {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.co-channel-head .ch-name { font-weight:600; font-size:14px; flex:1; }
.co-ch-badge {
  font-size:11px; padding:2px 8px; border-radius:8px;
  font-weight:500;
}

/* ============================================
   COMPANY COMBOBOX
   ============================================ */
.company-combobox { position:relative; min-width:220px; }
.company-combobox input {
  width:100%; padding:8px 32px 8px 12px; border:1px solid var(--border);
  border-radius:var(--radius); font-size:13px; font-family:inherit;
  background:var(--card-bg); color:var(--text); transition:var(--transition);
}
.company-combobox input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.company-combobox .combobox-dropdown {
  position:absolute; top:100%; left:0; right:0; margin-top:4px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  max-height:240px; overflow-y:auto; z-index:60; display:none; box-shadow:var(--shadow-md);
}
.company-combobox.open .combobox-dropdown { display:block; }
.company-combobox .combobox-item { padding:8px 14px; cursor:pointer; font-size:13px; transition:var(--transition); }
.company-combobox .combobox-item:hover { background:var(--bg-secondary); }
.company-combobox .combobox-item.active { background:var(--sidebar-active); color:var(--primary); font-weight:600; }

/* ============================================
   TOOLTIP
   ============================================ */
[data-tooltip] { position:relative; }
[data-tooltip]::after {
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px);
  left:50%; transform:translateX(-50%); padding:6px 10px;
  background:var(--text); color:var(--bg); border-radius:6px;
  font-size:11px; font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none; transition:all 0.15s ease;
}
[data-tooltip]:hover::after { opacity:1; }

/* ============================================
   UNSAVED-CHANGES HIGHLIGHT (company modal)
   ============================================ */
@keyframes unsaved-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
.btn-primary.unsaved-pulse {
  animation: unsaved-pulse 1.6s ease-in-out infinite;
}

/* ============================================
   ÖFFNUNGSZEITEN-LEGENDE (Toby Feedback 22.04.)
   ============================================ */
.hours-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border-radius: 12px;
}
.hours-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hours-legend-dot.open   { background: var(--success, #34c759); }
.hours-legend-dot.closed { background: var(--text-muted, #8e8e93); }