/* Panels & Cards */
.map-panel, .cell-panel, .panel, .settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
}

.settings-card {
  min-height: 330px;
}

.panel-heading {
  min-height: 76px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 {
  font: 400 20px Georgia, serif;
  margin: 0;
}

/* Badges */
.badge {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 4px 7px;
  color: var(--muted);
  font-size: 10px;
}

.badge[href] {
  text-decoration: none;
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(88, 214, 208, 0.1);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.status-dot.ok { background: var(--lime); }
.status-dot.warn { background: var(--amber); }

/* Buttons & Inputs */
.horizons button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.horizons button.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #061215;
}

.settings-form { padding: 20px; }
.settings-form label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 17px; }
.settings-form input:not([type=checkbox]), .settings-form textarea, .settings-form select {
  display: block; width: 100%; margin-top: 7px; padding: 12px 13px;
  background: #071116; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); font: inherit; outline: none;
}
.settings-form textarea { resize: vertical; }
.settings-form input:focus, .settings-form textarea:focus, .settings-form select:focus {
  border-color: var(--cyan); box-shadow: 0 0 0 3px #58d6d01a;
}
.settings-form .confirm { display: flex; align-items: flex-start; gap: 10px; }
.settings-form .confirm input { margin-top: 4px; accent-color: var(--cyan); }
.settings-form button {
  padding: 12px 18px; border: 0; border-radius: 3px; background: var(--cyan); color: #061215; font-weight: 800; cursor: pointer;
}
.settings-form small { display: block; color: var(--muted); margin-top: 14px; }

/* Form Notice */
.form-notice { margin: 18px 20px 0; padding: 12px; border-left: 3px solid var(--red); background: #341918; }
.form-notice.ok { border-color: var(--lime); background: #172819; }
.form-notice.error { color: #ffd8d5; }

/* Lists & Tables */
.empty { padding: 20px; color: var(--muted); margin: 0; }
.operations-list, .module-list, .event-list { min-height: 68px; }

/* Mobile Card / Accordion (for users.php) */
.accordion-item {
  border-bottom: 1px solid var(--line);
}
.accordion-header {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}
.accordion-header:hover {
  background: rgba(255,255,255,0.02);
}
.accordion-body {
  display: none;
  padding: 0 20px 20px;
}
.accordion-item.active .accordion-body {
  display: block;
}
.accordion-item.active .accordion-header {
  border-bottom-color: transparent;
}

/* User List specific styles (accordion elements) */
.user-name-cell { display: flex; align-items: center; gap: 14px; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--line); display: grid; place-items: center; color: var(--cyan); font-weight: 800; font-size: 16px; border: 1px solid var(--cyan); box-shadow: 0 0 10px rgba(88,214,208,0.15); }
.user-info { display: flex; flex-direction: column; gap: 2px; }
.user-display { color: var(--ink); font-weight: 600; font-size: 15px; }
.user-login { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; border: 1px solid; }
.status-active { color: var(--lime); border-color: rgba(189,219,103,0.3); background: rgba(189,219,103,0.05); }
.status-locked { color: var(--red); border-color: rgba(255,107,95,0.3); background: rgba(255,107,95,0.05); }
.role-badge { display: inline-block; padding: 3px 8px; background: rgba(233,240,244,0.05); border: 1px solid rgba(233,240,244,0.1); border-radius: 4px; font-size: 11px; color: var(--ink); margin-right: 4px; margin-bottom: 4px; }
.quota-grid { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.quota-item { display: flex; align-items: center; background: rgba(7,16,21,0.5); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--line); gap: 8px; }
.quota-item span { color: var(--muted); font-size: 12px; }
.quota-item input { width: 50px; padding: 4px 6px; background: #071015; border: 1px solid var(--line); color: var(--cyan); font-family: ui-monospace, monospace; font-size: 13px; border-radius: 3px; outline: none; text-align: center; }
.quota-item input:focus { border-color: var(--cyan); }
.save-btn { padding: 6px 12px; background: var(--cyan); color: #061215; border: none; border-radius: 4px; font-weight: 700; cursor: pointer; height: 32px; transition: filter 0.2s; }
.save-btn:hover { filter: brightness(1.1); }