/* Extra component styles */

/* User detail modal */
.user-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.user-detail-item {
  background: var(--bg-surface); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.user-detail-label { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.user-detail-value { font-size: 13px; color: var(--text-primary); font-weight: 500; direction: ltr; }

/* Sub link box */
.sub-link-box {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sub-link-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-secondary); font-size: 12px; direction: ltr;
  font-family: monospace;
}
.sub-link-box button {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; transition: color 0.2s;
}
.sub-link-box button:hover { color: var(--accent); }
.sub-link-box button svg { width: 14px; height: 14px; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle {
  width: 42px; height: 22px; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 99px;
  cursor: pointer; position: relative; transition: all 0.2s;
  flex-shrink: 0;
}
.toggle.on { background: rgba(74,222,128,0.2); border-color: var(--green); }
.toggle::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; background: var(--text-muted);
  border-radius: 50%; transition: all 0.2s;
}
.toggle.on::after { right: auto; left: 2px; background: var(--green); }
.toggle-label { font-size: 13px; color: var(--text-secondary); }

/* Inbound checkboxes */
.inbound-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.inbound-chip {
  padding: 4px 10px; border-radius: 99px; font-size: 12px;
  border: 1px solid var(--border); color: var(--text-secondary);
  cursor: pointer; transition: all 0.2s; user-select: none;
  direction: ltr;
}
.inbound-chip:hover { border-color: var(--accent); color: var(--accent); }
.inbound-chip.selected {
  background: var(--accent-glow); border-color: var(--accent); color: var(--accent);
}

/* Confirm dialog */
.confirm-body { text-align: center; padding: 10px 0 20px; }
.confirm-icon { font-size: 40px; margin-bottom: 12px; }
.confirm-body p { color: var(--text-secondary); font-size: 14px; }
.confirm-body strong { color: var(--text-primary); }

/* Section label */
.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 8px 12px 4px; display: block;
}

/* Traffic display */
.traffic-display {
  font-size: 12px; color: var(--text-secondary); margin-top: 6px;
  display: flex; justify-content: space-between;
}

/* Badge count */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--accent); color: #fff;
  border-radius: 99px; font-size: 10px; font-weight: 700;
  margin-right: 4px;
}

/* Reseller limit bar */
.limit-bar-wrap { margin-top: 10px; }
.limit-bar-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
}
.limit-bar {
  height: 4px; background: var(--bg-hover); border-radius: 99px; overflow: hidden;
}
.limit-bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.4s; }

/* Status indicator dot */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px;
}
.dot-active { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-expired { background: var(--accent-2); }
.dot-on_hold { background: var(--orange); }
.dot-disabled { background: var(--text-muted); }
