/**
 * adminCrmV2.css - CRM/ACL Admin Styles
 * 
 * Extends the admin styles from Usage Analytics for consistent admin section.
 * Uses the V2 theme system variables from v2-overlay.css
 */

/* =============================================================================
   GLOBAL BOX-SIZING
   ============================================================================= */

.v2-admin-pane *,
.v2-admin-pane *::before,
.v2-admin-pane *::after,
.v2-admin-modal *,
.v2-admin-modal *::before,
.v2-admin-modal *::after,
.v2-admin-drawer *,
.v2-admin-drawer *::before,
.v2-admin-drawer *::after {
  box-sizing: border-box;
}

/* =============================================================================
   DRAWER STYLES
   ============================================================================= */

.v2-admin-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 420px;
  height: 100vh;
  background: var(--v2-bg-surface);
  border-left: 1px solid var(--v2-border);
  z-index: 1000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--v2-shadow-lg);
}

.v2-admin-drawer.open {
  right: 0;
}

.v2-admin-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.v2-admin-drawer-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.v2-admin-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-bg-elevated);
}

.v2-admin-drawer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-admin-drawer-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--v2-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
}

.v2-admin-drawer-close:hover {
  color: var(--v2-text-primary);
  background: var(--v2-bg-hover);
}

.v2-admin-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--v2-bg-surface);
}

.v2-admin-drawer-section {
  margin-bottom: 24px;
}

.v2-admin-drawer-section h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v2-text-muted);
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}

/* =============================================================================
   FIELD GRID (for detail views)
   ============================================================================= */

.v2-admin-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.v2-admin-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.v2-admin-field span {
  display: block;
  font-size: 14px;
  color: var(--v2-text-primary);
}

.v2-admin-field span a {
  color: var(--v2-accent);
  text-decoration: none;
}

.v2-admin-field span a:hover {
  text-decoration: underline;
}

/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */

.v2-admin-input,
.v2-admin-select,
.v2-admin-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  background: var(--v2-bg-input);
  color: var(--v2-text-primary);
}

.v2-admin-input:focus,
.v2-admin-select:focus,
.v2-admin-textarea:focus {
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 2px var(--v2-accent-bg);
}

.v2-admin-input::placeholder,
.v2-admin-textarea::placeholder {
  color: var(--v2-text-placeholder);
}

.v2-admin-textarea {
  resize: vertical;
  min-height: 60px;
}

.v2-admin-form-group {
  margin-bottom: 16px;
}

.v2-admin-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-primary);
  margin-bottom: 6px;
}

.v2-admin-form-group small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--v2-text-muted);
}

.v2-admin-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--v2-text-primary);
  cursor: pointer;
}

.v2-admin-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* =============================================================================
   TOOLBAR
   ============================================================================= */

.v2-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--v2-bg-surface);
  border-bottom: 1px solid var(--v2-border);
}

.v2-admin-toolbar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-admin-toolbar-title i {
  color: var(--v2-accent);
}

.v2-admin-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--v2-border);
}

.v2-admin-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-admin-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: nowrap;
}

.v2-admin-toolbar-actions .v2-admin-select {
  min-width: 120px;
  max-width: 150px;
}

.v2-admin-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--v2-bg-primary);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  min-width: 200px;
}

.v2-admin-search-box i {
  color: var(--v2-text-muted);
  font-size: 14px;
}

.v2-admin-search-box input {
  border: none;
  background: transparent;
  color: var(--v2-text-primary);
  font-size: 14px;
  outline: none;
  width: 100%;
}

.v2-admin-search-box input::placeholder {
  color: var(--v2-text-muted);
}

/* =============================================================================
   TABS
   ============================================================================= */

.v2-admin-tabs {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  background: var(--v2-bg-surface);
  border-bottom: 1px solid var(--v2-border);
}

.v2-admin-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}

.v2-admin-tab:hover {
  color: var(--v2-text-primary);
}

.v2-admin-tab.active {
  color: var(--v2-accent);
}

.v2-admin-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--v2-accent);
}

/* =============================================================================
   TAB CONTENT
   ============================================================================= */

.v2-admin-tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.v2-admin-tab-pane {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.v2-admin-tab-pane.active {
  display: flex;
}

.v2-admin-tab-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--v2-bg-page);
  border-bottom: 1px solid var(--v2-border);
  flex-wrap: nowrap;
}

.v2-admin-tab-toolbar select,
.v2-admin-tab-toolbar input[type="text"],
.v2-admin-tab-toolbar input[type="date"] {
  width: auto;
  min-width: 120px;
  max-width: 200px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  box-sizing: border-box;
}

.v2-admin-tab-toolbar select:focus,
.v2-admin-tab-toolbar input[type="text"]:focus,
.v2-admin-tab-toolbar input[type="date"]:focus {
  outline: none;
  border-color: var(--v2-accent);
}

/* Responsive: allow wrap on smaller screens */
@media (max-width: 768px) {
  .v2-admin-tab-toolbar {
    flex-wrap: wrap;
  }
  
  .v2-admin-tab-toolbar select,
  .v2-admin-tab-toolbar input[type="text"],
  .v2-admin-tab-toolbar input[type="date"] {
    min-width: 100px;
    max-width: none;
    flex: 1;
  }
}

/* =============================================================================
   SPLIT VIEW LAYOUT
   ============================================================================= */

.v2-admin-split-view {
  display: flex;
  height: calc(100vh - 160px);
}

.v2-admin-split-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--v2-border);
  transition: flex 0.3s ease;
}

.v2-admin-split-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--v2-bg-page);
  min-width: 0;
}

.v2-admin-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-admin-panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-admin-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* =============================================================================
   ENHANCED BUTTONS
   ============================================================================= */

.v2-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.v2-admin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v2-admin-btn i {
  font-size: 12px;
}

.v2-admin-btn-primary {
  background: var(--v2-accent);
  color: white;
  border-color: var(--v2-accent);
}

.v2-admin-btn-primary:hover:not(:disabled) {
  background: var(--v2-accent-hover);
  border-color: var(--v2-accent-hover);
}

.v2-admin-btn-secondary {
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  border-color: var(--v2-border);
}

.v2-admin-btn-secondary:hover:not(:disabled) {
  background: var(--v2-bg-hover);
  border-color: var(--v2-text-muted);
}

.v2-admin-btn-success {
  background: var(--v2-success);
  color: white;
  border-color: var(--v2-success);
}

.v2-admin-btn-success:hover:not(:disabled) {
  filter: brightness(0.9);
}

.v2-admin-btn-danger {
  background: var(--v2-danger);
  color: white;
  border-color: var(--v2-danger);
}

.v2-admin-btn-danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

.v2-admin-btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* =============================================================================
   MODAL ENHANCEMENTS
   ============================================================================= */

.v2-admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.v2-admin-modal-overlay.active {
  display: flex;
}

/* Modal styles (used inside overlay wrapper) */
.v2-admin-modal {
  background: var(--v2-bg-surface);
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--v2-border);
  overflow-y: auto;
}

@media (max-width: 480px) {
  .v2-admin-modal {
    width: 95%;
    max-height: 90vh;
    border-radius: 12px;
  }
  
  .v2-admin-modal-content {
    padding: 16px;
  }
  
  .v2-admin-modal-content h3 {
    font-size: 16px;
    margin-bottom: 16px;
  }
  
  .v2-admin-modal-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .v2-admin-modal-actions .v2-admin-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Modal content wrapper */
.v2-admin-modal-content {
  padding: 24px;
}

.v2-admin-modal-content h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--v2-border);
}

/* TinyMCE container styling */
#user-notes-container {
  min-height: 200px;
  /* Prevent overflow */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#user-notes-container .tox-tinymce {
  border: 1px solid var(--v2-border) !important;
  border-radius: 6px !important;
  max-width: 100% !important;
}

#user-notes-container .tox-editor-header {
  border-bottom: 1px solid var(--v2-border) !important;
}

#user-notes-container .tox-toolbar__primary {
  background: var(--v2-bg-elevated) !important;
  flex-wrap: wrap !important;
}

@media (max-width: 480px) {
  #user-notes-container {
    min-height: 150px;
  }
  
  #user-notes-container .tox-tinymce {
    min-height: 150px !important;
  }
}

.v2-admin-modal-sm {
  max-width: 360px;
}

.v2-admin-modal-lg {
  max-width: 720px;
}

.v2-admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-admin-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-admin-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--v2-text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
}

.v2-admin-modal-close:hover {
  color: var(--v2-text-primary);
  background: var(--v2-bg-hover);
}

.v2-admin-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.v2-admin-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--v2-border);
  background: var(--v2-bg-elevated);
  border-radius: 0 0 8px 8px;
}

/* =============================================================================
   BADGES
   ============================================================================= */

.v2-admin-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.v2-admin-badge.success {
  background: rgba(40, 167, 69, 0.15);
  color: var(--v2-success);
}

.v2-admin-badge.pending {
  background: rgba(255, 193, 7, 0.15);
  color: #d39e00;
}

.v2-admin-badge.running {
  background: rgba(9, 100, 160, 0.15);
  color: var(--v2-accent);
}

.v2-admin-badge.failed {
  background: rgba(220, 53, 69, 0.15);
  color: var(--v2-danger);
}

.v2-admin-badge.warning {
  background: rgba(255, 193, 7, 0.15);
  color: #d39e00;
}

/* =============================================================================
   GRID STYLES
   ============================================================================= */

.v2-admin-grid {
  flex: 1;
  min-height: 200px;
  --ag-header-background-color: var(--v2-bg-elevated);
  --ag-background-color: var(--v2-bg-surface);
  --ag-odd-row-background-color: var(--v2-bg-surface);
  --ag-row-hover-color: var(--v2-bg-hover);
  --ag-border-color: var(--v2-border);
  --ag-header-foreground-color: var(--v2-text-primary);
  --ag-foreground-color: var(--v2-text-primary);
  --ag-secondary-foreground-color: var(--v2-text-muted);
}

.v2-grid-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 3px;
  color: white;
}

.v2-grid-tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 3px;
  background: var(--v2-bg-hover);
  color: var(--v2-text-primary);
  margin-right: 4px;
}

.v2-grid-link {
  color: var(--v2-accent);
  text-decoration: none;
}

.v2-grid-link:hover {
  text-decoration: underline;
}

.v2-grid-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.v2-grid-action-btn {
  background: transparent;
  border: none;
  padding: 4px 8px;
  color: var(--v2-text-muted);
  cursor: pointer;
  border-radius: 4px;
}

.v2-grid-action-btn:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text-primary);
}

.v2-grid-loading,
.v2-grid-no-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: var(--v2-text-muted);
}

.v2-grid-loading i,
.v2-grid-no-rows i {
  font-size: 32px;
}

/* =============================================================================
   TOAST CONTAINER
   ============================================================================= */

.v2-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v2-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--v2-bg-elevated);
  border-radius: 6px;
  box-shadow: var(--v2-shadow-lg);
  font-size: 14px;
  color: var(--v2-text-primary);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: 1px solid var(--v2-border);
}

.v2-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.v2-toast-success {
  border-left: 4px solid var(--v2-success);
}

.v2-toast-success i {
  color: var(--v2-success);
}

.v2-toast-error {
  border-left: 4px solid var(--v2-danger);
}

.v2-toast-error i {
  color: var(--v2-danger);
}

.v2-toast-warning {
  border-left: 4px solid var(--v2-warning);
}

.v2-toast-warning i {
  color: var(--v2-warning);
}

.v2-toast-info {
  border-left: 4px solid var(--v2-accent);
}

.v2-toast-info i {
  color: var(--v2-accent);
}

/* =============================================================================
   INLINE GRIDS (for related items in drawers)
   ============================================================================= */

.v2-admin-inline-grid {
  height: 200px;
}

/* =============================================================================
   TIMELINE
   ============================================================================= */

.v2-admin-timeline {
  position: relative;
  padding-left: 24px;
}

.v2-admin-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--v2-border);
}

.v2-admin-timeline-item {
  position: relative;
  padding-bottom: 16px;
}

.v2-admin-timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--v2-accent);
  border: 2px solid var(--v2-bg-surface);
}

.v2-admin-timeline-date {
  font-size: 11px;
  color: var(--v2-text-muted);
  margin-bottom: 4px;
}

.v2-admin-timeline-content {
  font-size: 14px;
  color: var(--v2-text-primary);
}

.v2-admin-timeline-content strong {
  font-weight: 600;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.v2-admin-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--v2-text-muted);
  text-align: center;
}

.v2-admin-empty i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.v2-admin-empty h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: var(--v2-text-primary);
}

.v2-admin-empty p {
  margin: 0;
  font-size: 14px;
}

/* =============================================================================
   CRM-SPECIFIC STYLES
   ============================================================================= */

.v2-crm-quick-add {
  padding: 12px;
  background: var(--v2-bg-hover);
  border-radius: 6px;
  margin-bottom: 16px;
}

.v2-crm-quick-add h5 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v2-text-muted);
  margin: 0 0 12px 0;
}

.v2-crm-provisioning-panel {
  padding: 16px;
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(9, 100, 160, 0.1));
  border-radius: 8px;
  border: 1px solid var(--v2-border);
}

.v2-crm-provisioning-panel h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-crm-provisioning-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.v2-crm-provisioning-status i {
  font-size: 16px;
}

.v2-crm-provisioning-status.provisioned i {
  color: var(--v2-success);
}

.v2-crm-provisioning-status.not-provisioned i {
  color: var(--v2-text-muted);
}

/* =============================================================================
   FOIA LINK INDICATOR
   ============================================================================= */

.v2-foia-linked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--v2-accent);
  font-size: 12px;
}

.v2-foia-linked i {
  font-size: 10px;
}

/* =============================================================================
   PLATFORM USER LINK
   ============================================================================= */

.v2-platform-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--v2-accent-bg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--v2-accent);
}

.v2-platform-user-badge i {
  font-size: 10px;
}

/* =============================================================================
   ACTIVITY PANEL
   ============================================================================= */

.v2-activity-panel {
  max-height: 300px;
  overflow-y: auto;
}

.v2-activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--v2-border);
}

.v2-activity-item:last-child {
  border-bottom: none;
}

.v2-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v2-bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--v2-text-muted);
  font-size: 14px;
}

.v2-activity-content {
  flex: 1;
  min-width: 0;
}

.v2-activity-title {
  font-size: 13px;
  color: var(--v2-text-primary);
  margin-bottom: 2px;
}

.v2-activity-time {
  font-size: 11px;
  color: var(--v2-text-muted);
}

/* =============================================================================
   AUTOCOMPLETE
   ============================================================================= */

.v2-admin-autocomplete {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.v2-autocomplete-input {
  width: 100%;
  box-sizing: border-box;
}

.v2-autocomplete-input.v2-autocomplete-selected {
  border-color: var(--v2-success);
  background: rgba(40, 167, 69, 0.05);
}

.v2-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--v2-bg-elevated);
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  box-shadow: var(--v2-shadow-lg);
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  display: none;
  margin-top: 4px;
}

.v2-autocomplete-dropdown.open {
  display: block;
}

.v2-autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--v2-border-light);
  transition: background 0.15s ease;
}

.v2-autocomplete-item:last-child {
  border-bottom: none;
}

.v2-autocomplete-item:hover {
  background: var(--v2-bg-hover);
}

.v2-autocomplete-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-autocomplete-item-name i {
  color: var(--v2-text-muted);
  font-size: 12px;
}

.v2-autocomplete-item-subtext {
  font-size: 12px;
  color: var(--v2-text-muted);
  margin-top: 2px;
  margin-left: 20px;
}

.v2-autocomplete-empty {
  padding: 16px;
  text-align: center;
  color: var(--v2-text-muted);
  font-size: 13px;
}

/* =============================================================================
   READONLY FIELD (for context display)
   ============================================================================= */

.v2-admin-readonly-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--v2-bg-hover);
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--v2-text-primary);
  width: 100%;
  box-sizing: border-box;
}

.v2-admin-readonly-field i {
  color: var(--v2-accent);
  font-size: 14px;
}

/* =============================================================================
   V2 ADMIN PANE - Base styles for all admin tool panes
   ============================================================================= */

/* Note: .v2-tool-pane sets display:none by default and display:grid when active.
   We need to override to display:flex when active but NOT override the display:none. */
.v2-admin-pane {
  /* Don't set display here - let .v2-tool-pane's display:none work */
  flex-direction: column;
  height: 100%;
  min-height: 0; /* Critical: allows content to shrink in flex context */
  overflow: hidden;
  background: var(--v2-bg-page);
  position: relative; /* For absolutely positioned overlays like user editor */
}

/* Override the grid display from .v2-tool-pane.active with flex for admin panes */
.v2-admin-pane.active {
  display: flex !important;
}

.v2-admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =============================================================================
   V2 ADMIN USERS - Additional styles for User Management page
   ============================================================================= */

/* Content split layout (grid + drawer) */
.v2-admin-content-split {
  flex: 1;
  min-height: 0; /* Critical: allows flex item to shrink */
  display: flex;
  overflow: hidden;
  gap: 0;
  position: relative;
}

.v2-admin-grid-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.v2-admin-grid-container > div[class*="ag-theme"] {
  flex: 1;
  min-height: 400px;
  height: 100%;
  width: 100%;
}

/* Make all grid rows clickable */
.v2-admin-grid-container .ag-row {
  cursor: pointer;
}

.v2-admin-grid-container .ag-row:hover {
  background-color: var(--v2-bg-elevated) !important;
}

/* =============================================================================
   USER EDITOR PANEL - Full overlay modal style
   ============================================================================= */

.v2-user-editor-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.v2-user-editor-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.v2-user-editor-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--v2-bg-page);
  z-index: 101;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  /* Improve mobile scrolling */
  -webkit-overflow-scrolling: touch;
}

.v2-user-editor-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.v2-user-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-bg-surface);
  flex-shrink: 0;
}

.v2-user-editor-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-user-editor-header h3 i {
  color: var(--v2-accent);
}

.v2-user-editor-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--v2-text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.v2-user-editor-close:hover {
  color: var(--v2-text-primary);
  background: var(--v2-bg-hover);
}

.v2-user-editor-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 24px;
  align-content: start;
  /* Smooth scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Prevent horizontal overflow */
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .v2-user-editor-body {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .v2-user-editor-body {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  
  .v2-user-editor-header {
    padding: 12px 16px;
  }
  
  .v2-user-editor-header h3 {
    font-size: 16px;
  }
  
  .v2-user-editor-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }
  
  .v2-user-editor-footer-left {
    width: 100%;
    justify-content: center;
  }
  
  .v2-user-editor-footer-right {
    width: 100%;
    justify-content: stretch;
  }
  
  .v2-user-editor-footer-right .v2-admin-btn {
    flex: 1;
  }
  
  .v2-user-editor-section {
    padding: 12px;
  }
  
  .v2-user-editor-section h4 {
    font-size: 12px;
    margin-bottom: 12px;
  }
  
  .v2-user-form-grid {
    grid-template-columns: 1fr;
  }
  
  .v2-user-form-grid .full-width {
    grid-column: 1;
  }
}

@media (max-width: 480px) {
  .v2-user-editor-body {
    padding: 12px;
    gap: 12px;
  }
  
  .v2-user-editor-header {
    padding: 10px 12px;
  }
  
  .v2-user-editor-header h3 {
    font-size: 14px;
  }
  
  .v2-user-editor-header h3 i {
    display: none;
  }
  
  .v2-user-editor-footer {
    padding: 10px 12px;
  }
  
  .v2-user-editor-section {
    padding: 10px;
  }
  
  .v2-user-form-field input,
  .v2-user-form-field select {
    padding: 10px 12px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  .v2-admin-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  /* Stack action buttons vertically on very small screens */
  .v2-user-editor-section .v2-admin-btn {
    font-size: 13px;
    padding: 10px 12px;
  }
  
  /* Make chips wrap better */
  .v2-admin-chips-container {
    gap: 6px;
  }
  
  .v2-admin-chip {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  /* Adjust list items for mobile */
  .v2-admin-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .v2-admin-list-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.v2-user-editor-section {
  background: var(--v2-bg-primary);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 16px;
  /* Prevent overflow on mobile */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.v2-user-editor-section.full-width {
  grid-column: 1 / -1;
}

.v2-user-editor-section h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v2-text-muted);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-user-editor-section h4 i {
  font-size: 14px;
  color: var(--v2-accent);
}

.v2-user-editor-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-top: 1px solid var(--v2-border);
  background: var(--v2-bg-surface);
  flex-shrink: 0;
}

.v2-user-editor-footer-left {
  display: flex;
  gap: 12px;
}

.v2-user-editor-footer-right {
  display: flex;
  gap: 12px;
}

/* Form grid within sections */
.v2-user-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Prevent overflow */
  min-width: 0;
  max-width: 100%;
}

.v2-user-form-grid .full-width {
  grid-column: 1 / -1;
}

.v2-user-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Prevent overflow */
  min-width: 0;
  max-width: 100%;
}

.v2-user-form-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-text-muted);
}

.v2-user-form-field input,
.v2-user-form-field select {
  padding: 8px 12px;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  font-size: 14px;
  /* Prevent overflow */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.v2-user-form-field input:focus,
.v2-user-form-field select:focus {
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-bg, rgba(59, 130, 246, 0.1));
}

.v2-user-form-field input:disabled,
.v2-user-form-field select:disabled {
  background: var(--v2-bg-elevated);
  color: var(--v2-text-muted);
  cursor: not-allowed;
}

.v2-user-form-readonly {
  padding: 8px 12px;
  background: var(--v2-bg-elevated);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  color: var(--v2-text-secondary);
  font-size: 14px;
  /* Prevent overflow */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

/* Grid link cells */
.v2-grid-link-cell {
  cursor: pointer;
}

.v2-grid-link {
  color: var(--v2-accent);
  text-decoration: none;
}

.v2-grid-link:hover {
  text-decoration: underline;
}

/* Badges in grid */
.v2-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.v2-badge-plan {
  background: var(--v2-accent);
  color: white;
}

.v2-badge-success {
  background: #27ae60;
  color: white;
}

.v2-badge-warning {
  background: #f39c12;
  color: white;
}

.v2-badge-danger {
  background: #e74c3c;
  color: white;
}

/* Chips in grid */
.v2-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  margin-right: 4px;
  background: var(--v2-bg-elevated);
  border: 1px solid var(--v2-border);
  color: var(--v2-text-secondary);
}

.v2-chip-role {
  background: rgba(52, 152, 219, 0.2);
  border-color: rgba(52, 152, 219, 0.4);
  color: #3498db;
}

.v2-muted {
  color: var(--v2-text-muted);
}

/* Chips container in drawer */
.v2-admin-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Prevent overflow */
  max-width: 100%;
  overflow: hidden;
}

.v2-admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--v2-bg-elevated);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  font-size: 13px;
}

.v2-admin-chip-label {
  font-weight: 500;
  color: var(--v2-text-primary);
}

.v2-admin-chip-info {
  font-size: 11px;
  color: var(--v2-text-muted);
}

.v2-admin-chip-remove {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--v2-text-muted);
  font-size: 12px;
}

.v2-admin-chip-remove:hover {
  color: #e74c3c;
}

/* List items for groups */
.v2-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Prevent overflow */
  max-width: 100%;
  overflow: hidden;
}

.v2-admin-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--v2-bg-elevated);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  /* Prevent overflow */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.v2-admin-list-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Prevent overflow */
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.v2-admin-list-item-name {
  font-weight: 500;
  color: var(--v2-text-primary);
  /* Prevent overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-admin-list-item-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--v2-accent);
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.v2-admin-list-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Small select in list items */
.v2-admin-select-sm {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 80px;
}

/* Icon buttons */
.v2-admin-btn-icon {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--v2-text-secondary);
  font-size: 14px;
  border-radius: 4px;
}

.v2-admin-btn-icon:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text-primary);
}

.v2-admin-btn-icon.v2-admin-btn-danger:hover {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

/* Admin actions grid */
.v2-admin-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Button variants */
.v2-admin-btn-warning {
  background: #f39c12;
  color: white;
  border: none;
}

.v2-admin-btn-warning:hover {
  background: #e67e22;
}

.v2-admin-btn-success {
  background: #27ae60;
  color: white;
  border: none;
}

.v2-admin-btn-success:hover {
  background: #229954;
}

/* Meta section */
.v2-admin-section-meta {
  background: var(--v2-bg-elevated);
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  padding: 12px;
}

.v2-admin-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
}

.v2-admin-meta-label {
  color: var(--v2-text-muted);
}

.v2-admin-meta-value {
  color: var(--v2-text-secondary);
  font-family: monospace;
}

/* Loading and error states */
.v2-admin-loading,
.v2-admin-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--v2-text-muted);
}

.v2-admin-loading i {
  margin-right: 10px;
}

.v2-admin-error {
  color: #e74c3c;
}

/* Autocomplete results */
.v2-admin-autocomplete-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  margin-top: 4px;
  background: var(--v2-bg-surface);
}

.v2-admin-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--v2-border);
}

.v2-admin-autocomplete-item:last-child {
  border-bottom: none;
}

.v2-admin-autocomplete-item:hover {
  background: var(--v2-bg-hover);
}

.v2-admin-autocomplete-item-name {
  flex: 1;
  font-weight: 500;
  color: var(--v2-text-primary);
}

.v2-admin-autocomplete-item-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--v2-accent);
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
}

.v2-admin-autocomplete-item-count {
  font-size: 11px;
  color: var(--v2-text-muted);
}

.v2-admin-autocomplete-empty {
  padding: 20px;
  text-align: center;
  color: var(--v2-text-muted);
  font-size: 13px;
}

/* ============================================
   V2 Profile Pages Styles
   ============================================ */

.v2-profile-pane {
  /* Hidden by default - inherits display:none from .v2-tool-pane */
  flex-direction: column;
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--v2-bg-page);
}

/* Show profile pane with flex layout when active */
.v2-profile-pane.active {
  display: flex !important;
}

/* Profile Page Container */
.v2-profile-page {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.v2-profile-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-profile-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.v2-profile-header h1 i {
  color: var(--v2-accent);
}

.v2-profile-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--v2-text-muted);
}

/* Dark theme: force explicit high-contrast colors because some profile
 * sub-pages (notifications, account, etc.) redefine --v2-text-primary /
 * --v2-text-muted locally and the bare var() above would otherwise
 * resolve to near-black text on the dark background. */
.dark-theme .v2-profile-header h1 { color: #f1f3f7 !important; }
.dark-theme .v2-profile-header h1 i { color: #4db5e0 !important; }
.dark-theme .v2-profile-subtitle   { color: #b0b7c5 !important; }
.dark-theme .v2-profile-title      { color: #f1f3f7 !important; }

.v2-profile-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-profile-actions {
  display: flex;
  gap: 8px;
}

.v2-profile-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Profile Cards */
.v2-profile-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  overflow: hidden;
}

.v2-profile-card-header {
  padding: 16px 20px;
  background: var(--v2-bg-page);
  border-bottom: 1px solid var(--v2-border);
}

.v2-profile-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-profile-card-header h3 i {
  color: var(--v2-accent);
  font-size: 14px;
}

.v2-profile-card-body {
  padding: 20px;
}

/* Profile Section (alternative to card) */
.v2-profile-section {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 20px;
}

.v2-profile-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-profile-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-primary);
}

/* Profile Forms */
.v2-profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v2-profile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .v2-profile-form-row {
    grid-template-columns: 1fr;
  }
}

.v2-profile-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-profile-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-secondary);
}

.v2-profile-form-group input,
.v2-profile-form-group select,
.v2-profile-form-group textarea {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--v2-border);
  border-radius: 6px;
  background: var(--v2-bg-page);
  color: var(--v2-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.v2-profile-form-group input:focus,
.v2-profile-form-group select:focus,
.v2-profile-form-group textarea:focus {
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px var(--v2-accent-bg-hover);
}

.v2-profile-form-group input::placeholder {
  color: var(--v2-text-muted);
}

.v2-profile-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--v2-border);
}

.v2-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-secondary);
}

.v2-form-help-text {
  font-size: 12px;
  color: var(--v2-text-muted);
  margin: 4px 0 0 0;
}

.v2-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Profile Info Rows (read-only data display) */
.v2-profile-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--v2-border);
}

.v2-profile-info-row:last-child {
  border-bottom: none;
}

.v2-profile-info-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-secondary);
}

.v2-profile-info-value {
  font-size: 14px;
  color: var(--v2-text-primary);
}

.v2-profile-mono {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
  font-size: 13px;
  background: var(--v2-bg-page);
  padding: 4px 8px;
  border-radius: 4px;
}

/* Account / profile info rows — bare var() fallbacks render near-black text
 * on /profile/account (v2-profile-info-value) and the .v2-profile-mono code
 * box shows a light gray background because the host page redefines
 * --v2-bg-page. Force dark-mode hex values here. */
.dark-theme .v2-profile-info-label { color: #b0b7c5 !important; }
.dark-theme .v2-profile-info-value { color: #f1f3f7 !important; }
.dark-theme .v2-profile-mono {
  background: #161b26 !important;
  color: #e6e9f0 !important;
  border: 1px solid #1e2433;
}

/* Profile Note */
.v2-profile-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--v2-accent-bg);
  border-radius: 6px;
  font-size: 13px;
  color: var(--v2-text-secondary);
}

.v2-profile-note i {
  color: var(--v2-accent);
  margin-top: 2px;
}

/* Profile Loading */
.v2-profile-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--v2-text-muted);
  font-size: 14px;
}

.v2-profile-loading i {
  font-size: 20px;
}

/* Profile Error */
.v2-profile-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
  color: var(--v2-danger, #e74c3c);
}

.v2-profile-error i {
  font-size: 32px;
  opacity: 0.8;
}

/* Profile Placeholder (Coming Soon) */
.v2-profile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--v2-text-muted);
}

.v2-profile-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.v2-profile-placeholder h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-profile-placeholder p {
  margin: 0;
  font-size: 14px;
}

/* V2 Buttons 
   These mirror .v2-admin-btn styles for use in Profile pages.
   Consider using .v2-admin-btn classes directly for full consistency.
   ============================================ */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.v2-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v2-btn i {
  font-size: 12px;
}

.v2-btn-primary {
  background: var(--v2-accent);
  color: white;
  border-color: var(--v2-accent);
}

.v2-btn-primary:hover:not(:disabled) {
  background: var(--v2-accent-hover);
  border-color: var(--v2-accent-hover);
}

.v2-btn-secondary {
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  border: 1px solid var(--v2-border);
}

.v2-btn-secondary:hover:not(:disabled) {
  background: var(--v2-bg-hover);
  border-color: var(--v2-text-muted);
}

/* Dark theme: explicit hex overrides so secondary buttons (branding page
 * #remove-logo-btn, #disclosure-cancel-btn, etc.) stay legible even when a
 * host page redefines --v2-bg-surface / --v2-text-primary. */
.dark-theme .v2-btn-secondary {
  background: #161b26 !important;
  color: #e6e9f0 !important;
  border-color: #252d3d !important;
}
.dark-theme .v2-btn-secondary:hover:not(:disabled) {
  background: #1e2433 !important;
  border-color: #4db5e0 !important;
  color: #ffffff !important;
}
.dark-theme .v2-btn-secondary:disabled {
  background: #111520 !important;
  color: #6b7280 !important;
  border-color: #1e2433 !important;
}

.v2-btn-danger {
  background: var(--v2-danger);
  color: white;
  border-color: var(--v2-danger);
}

.v2-btn-danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

.v2-btn-success {
  background: var(--v2-success);
  color: white;
  border-color: var(--v2-success);
}

.v2-btn-success:hover:not(:disabled) {
  filter: brightness(0.9);
}

.v2-btn-ghost {
  background: transparent;
  color: var(--v2-text-secondary);
  border: none;
}

.v2-btn-ghost:hover:not(:disabled) {
  background: var(--v2-bg-hover);
  color: var(--v2-text-primary);
}

/* V2 Toast Notifications */
.v2-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  color: var(--v2-text-primary);
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s ease;
}

.v2-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.v2-toast-success {
  border-left: 4px solid #2ecc71;
}

.v2-toast-success i {
  color: #2ecc71;
}

.v2-toast-error {
  border-left: 4px solid #e74c3c;
}

.v2-toast-error i {
  color: #e74c3c;
}

.v2-toast-info i {
  color: var(--v2-accent);
}

/* ============================================
   V2 Subscription & Billing Page
   ============================================ */

/* Page wrapper */
.v2-sub-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.v2-sub-header {
  text-align: center;
  margin-bottom: 28px;
}

.v2-sub-header h1 {
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 800;
  color: var(--v2-text-primary);
}

.v2-sub-header p {
  margin: 0;
  font-size: 15px;
  color: var(--v2-text-muted);
}

/* ---------- Advisor CRD banner ---------- */
.v2-sub-advisor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  margin-bottom: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
  color: #fff;
}

.v2-sub-advisor-banner-body {
  flex: 1;
  min-width: 0;
}

.v2-sub-badge-sm {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 6px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  margin-bottom: 8px;
}

.v2-sub-badge--inst {
  background: rgba(99,102,241,0.25);
  color: #a5b4fc;
}

.v2-sub-advisor-banner h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.v2-sub-advisor-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.92;
}

.v2-sub-advisor-verify-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  color: #4f46e5;
  background: #fff;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
}

.v2-sub-advisor-verify-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transform: translateY(-1px);
  color: #4f46e5;
  text-decoration: none;
}

/* ---------- Monthly / Annual toggle ---------- */
.v2-sub-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.v2-sub-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-muted);
  transition: color 0.2s;
  user-select: none;
}

.v2-sub-toggle-label.active {
  color: var(--v2-text-primary);
  font-weight: 600;
}

.v2-sub-toggle-save {
  font-size: 12px;
  font-weight: 600;
  color: var(--v2-accent);
}

.v2-sub-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.v2-sub-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.v2-sub-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--v2-border);
  border-radius: 24px;
  transition: background 0.25s;
}

.v2-sub-toggle-slider::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.v2-sub-toggle-switch input:checked + .v2-sub-toggle-slider {
  background: var(--v2-accent);
}

.v2-sub-toggle-switch input:checked + .v2-sub-toggle-slider::after {
  transform: translateX(20px);
}

/* ---------- Plan cards grid ---------- */
.v2-sub-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.v2-sub-cards-loading {
  text-align: center;
  padding: 60px 0;
}

.v2-sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  padding: 28px 22px 22px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.v2-sub-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

.v2-sub-card--popular {
  border-color: var(--v2-accent);
  border-width: 2px;
}

.v2-sub-card--current {
  background: var(--v2-bg-page);
}

.v2-sub-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 3px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--v2-accent);
  border-radius: 6px;
  white-space: nowrap;
}

.v2-sub-card-head {
  margin-bottom: 20px;
}

.v2-sub-card-head h3 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--v2-text-primary);
}

.v2-sub-card-tagline {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--v2-text-muted);
  font-style: italic;
}

.v2-sub-card-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.v2-sub-price-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--v2-text-primary);
  line-height: 1;
}

.v2-sub-price-period {
  font-size: 14px;
  color: var(--v2-text-muted);
  font-weight: 500;
}

/* Feature list */
.v2-sub-card-features {
  list-style: none;
  margin: 0 0 auto;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v2-sub-feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--v2-text-secondary);
  line-height: 1.35;
}

.v2-sub-feat i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 13px;
}

.v2-sub-feat--check i { color: #22c55e; }
.v2-sub-feat--limit i { color: #ef4444; }
.v2-sub-feat--none i { color: var(--v2-text-muted); opacity: 0.5; }
.v2-sub-feat--info i { color: var(--v2-accent); }

/* CTA buttons */
.v2-sub-card-btn {
  display: block;
  width: 100%;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  border: 2px solid transparent;
}

.v2-sub-card-btn--solid {
  background: var(--v2-accent);
  color: #fff;
  border-color: var(--v2-accent);
}

.v2-sub-card-btn--solid:hover {
  background: var(--v2-accent-dark, #4338ca);
  border-color: var(--v2-accent-dark, #4338ca);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.35);
}

.v2-sub-card-btn--outline {
  background: transparent;
  color: var(--v2-text-primary);
  border-color: var(--v2-border);
}

.v2-sub-card-btn--outline:hover {
  border-color: var(--v2-accent);
  color: var(--v2-accent);
}

.v2-sub-card-btn--current {
  background: transparent;
  color: var(--v2-text-primary);
  border-color: var(--v2-border);
}

.v2-sub-card-btn--current:not([disabled]):hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.v2-sub-card-btn[disabled],
.v2-sub-card-btn[disabled]:hover {
  cursor: not-allowed;
  opacity: 0.55;
  background: transparent;
  color: var(--v2-text-muted);
  border-color: var(--v2-border);
  transform: none;
  box-shadow: none;
}

/* ---------- Enterprise section ---------- */
.v2-sub-enterprise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 40px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%);
  color: #e2e8f0;
  margin-bottom: 32px;
}

.v2-sub-enterprise-body {
  flex: 1;
  min-width: 0;
}

.v2-sub-enterprise h2 {
  margin: 8px 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

.v2-sub-enterprise p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}

.v2-sub-enterprise-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}

.v2-sub-enterprise-features span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e2e8f0;
}

.v2-sub-enterprise-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px 28px;
}

.v2-sub-enterprise-cta-label {
  font-size: 12px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.v2-sub-enterprise-cta strong {
  font-size: 16px;
  color: #fff;
}

.v2-sub-enterprise-email-btn {
  display: inline-block;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--v2-accent);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
  margin-top: 4px;
}

.v2-sub-enterprise-email-btn:hover {
  background: var(--v2-accent-dark, #4338ca);
  color: #fff;
  text-decoration: none;
}

/* ---------- Billing management (Stripe portal) ---------- */
.v2-sub-manage {
  padding: 24px 0 0;
}

.v2-sub-manage h3 {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--v2-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-sub-manage-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* Reusable billing-action-item (still referenced in billing manage) */

.v2-billing-action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--v2-bg-page);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.v2-billing-action-item:hover {
  border-color: var(--v2-accent);
  background: var(--v2-bg-surface);
}

.v2-billing-action-item.v2-billing-action-danger:hover {
  border-color: var(--v2-danger, #e74c3c);
}

.v2-billing-action-item.v2-billing-action-danger .v2-billing-action-icon {
  background: rgba(231, 76, 60, 0.1);
  color: var(--v2-danger, #e74c3c);
}

.v2-billing-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--v2-accent-bg);
  color: var(--v2-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.v2-billing-action-info {
  flex: 1;
  min-width: 0;
}

.v2-billing-action-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-billing-action-info p {
  margin: 0;
  font-size: 13px;
  color: var(--v2-text-muted);
}

.v2-billing-action-item > i:last-child {
  color: var(--v2-text-muted);
  font-size: 12px;
}

.v2-billing-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--v2-accent-bg);
  border-radius: 6px;
  font-size: 13px;
  color: var(--v2-text-muted);
}

.v2-billing-note i {
  color: var(--v2-accent);
}

/* Small button variant - matches .v2-admin-btn-sm */
.v2-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ============================================
   V2 Branding Page Styles
   ============================================ */

.v2-branding-logo-area {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

@media (max-width: 600px) {
  .v2-branding-logo-area {
    flex-direction: column;
    align-items: center;
  }
}

.v2-branding-logo-preview {
  width: 200px;
  height: 200px;
  border: 2px dashed var(--v2-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--v2-bg-page);
  flex-shrink: 0;
}

.v2-branding-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.v2-branding-logo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--v2-text-muted);
  text-align: center;
  padding: 20px;
}

.v2-branding-logo-placeholder i {
  font-size: 48px;
  opacity: 0.4;
}

.v2-branding-logo-placeholder span {
  font-size: 13px;
}

.v2-branding-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v2-branding-logo-hint {
  margin: 0;
  font-size: 12px;
  color: var(--v2-text-muted);
  max-width: 250px;
}

.v2-profile-field-hint {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--v2-text-muted);
}

/* Branding preview report mock */
.v2-branding-preview-mock {
  background: white;
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 20px;
  max-width: 400px;
}

.v2-branding-preview-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: 16px;
}

.v2-branding-preview-logo {
  width: 100px;
  height: 40px;
  object-fit: contain;
}

.v2-branding-preview-footer {
  padding-top: 12px;
  border-top: 1px solid var(--v2-border);
  font-size: 10px;
  color: #666;
  line-height: 1.5;
}

/* ============================================
   V2 Access Sharing Page Styles
   ============================================ */

.v2-access-summary {
  margin-bottom: 24px;
}

.v2-access-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .v2-access-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .v2-access-summary-grid {
    grid-template-columns: 1fr;
  }
}

.v2-access-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.v2-access-summary-card:hover {
  border-color: var(--v2-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.v2-access-summary-card.active {
  border-color: var(--v2-accent);
  background: var(--v2-bg-page);
  box-shadow: 0 0 0 3px var(--v2-accent-bg-hover);
}

.v2-access-summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.v2-access-summary-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v2-access-summary-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--v2-text-primary);
  line-height: 1;
}

.v2-access-summary-label {
  font-size: 13px;
  color: var(--v2-text-muted);
}

/* Access Tabs */
.v2-access-tabs {
  margin-bottom: 20px;
}

.v2-access-tabs-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--v2-border);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.v2-access-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-bottom: -1px;
}

.v2-access-tab:hover {
  color: var(--v2-text-primary);
  background: var(--v2-bg-hover);
}

.v2-access-tab.active {
  color: var(--v2-accent);
  border-bottom-color: var(--v2-accent);
}

.v2-access-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--v2-bg-page);
  border-radius: 10px;
  color: var(--v2-text-muted);
}

.v2-access-tab.active .v2-access-tab-badge {
  background: var(--v2-accent);
  color: white;
}

/* Access Content Area */
.v2-access-content {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  min-height: 300px;
}

/* Access Items List */
.v2-access-items {
  display: flex;
  flex-direction: column;
}

.v2-access-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--v2-border);
  transition: background 0.2s ease;
}

.v2-access-item:last-child {
  border-bottom: none;
}

.v2-access-item:hover {
  background: var(--v2-bg-hover);
}

.v2-access-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--v2-accent-bg);
  color: var(--v2-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.v2-access-item-info {
  flex: 1;
  min-width: 0;
}

.v2-access-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-access-item-meta {
  font-size: 12px;
  color: var(--v2-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-access-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-access-permission-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--v2-bg-page);
  color: var(--v2-text-secondary);
}

.v2-access-permission-badge.owner {
  background: var(--v2-accent-bg-hover);
  color: var(--v2-accent);
}

.v2-access-permission-badge.admin {
  background: rgba(46, 204, 113, 0.15);
  color: var(--v2-success);
}

.v2-access-permission-badge.edit {
  background: rgba(243, 156, 18, 0.15);
  color: var(--v2-warning);
}

/* Empty state for access tabs */
.v2-access-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.v2-access-empty i {
  font-size: 48px;
  color: var(--v2-text-muted);
  margin-bottom: 16px;
  opacity: 0.4;
}

.v2-access-empty h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--v2-text-primary);
}

.v2-access-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--v2-text-muted);
  max-width: 300px;
}

/* Loading Overlay */
.v2-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--v2-bg-page-rgb, 255, 255, 255), 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* Logo Preview */
.v2-logo-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 60px;
  border: 1px dashed var(--v2-border);
  border-radius: 4px;
  background: var(--v2-bg-page);
  overflow: hidden;
}

.v2-logo-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Access Sharing Summary Cards */
.v2-access-summary-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.v2-summary-card {
  flex: 1;
  min-width: 150px;
  background: var(--v2-bg-page);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.v2-summary-card:hover {
  border-color: var(--v2-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.v2-summary-card.active {
  border-color: var(--v2-accent);
  background: var(--v2-bg-surface);
}

.v2-summary-card h4 {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--v2-text-secondary);
}

.v2-summary-card p {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--v2-accent);
}

/* Tab Buttons */
.v2-tab-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.btn-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  color: var(--v2-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tab:hover {
  background: var(--v2-bg-hover);
  color: var(--v2-text-primary);
}

.btn-tab.active {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: white;
}

/* Access List Container */
.v2-access-list-container {
  margin-top: 16px;
  position: relative;
  min-height: 400px;
}

/* Empty State */
.v2-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--v2-text-muted);
}

.v2-empty-state i {
  margin-bottom: 16px;
  opacity: 0.5;
}

.v2-empty-state p {
  margin: 0;
  font-size: 14px;
}

/* Coming Soon Placeholder */
.v2-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

.v2-coming-soon i {
  font-size: 48px;
  color: var(--v2-text-muted);
  margin-bottom: 16px;
  opacity: 0.5;
}

.v2-coming-soon h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: var(--v2-text-primary);
}

.v2-coming-soon p {
  margin: 0;
  font-size: 14px;
  color: var(--v2-text-muted);
}

/* ============================================
   Share Drawer Styles
   ============================================ */

.v2-share-entries-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.v2-share-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--v2-border);
}

.v2-share-entry:last-child {
  border-bottom: none;
}

.v2-share-entry-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.v2-share-entry-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--v2-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.v2-share-entry-avatar.group {
  background: var(--v2-warning, #f39c12);
}

.v2-share-entry-details {
  flex: 1;
  min-width: 0;
}

.v2-share-entry-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--v2-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-share-entry-type {
  font-size: 11px;
  color: var(--v2-text-muted);
  text-transform: uppercase;
}

.v2-share-entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.v2-share-entry-permission {
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  background: var(--v2-bg-surface);
  color: var(--v2-text-primary);
  cursor: pointer;
}

.v2-share-entry-permission:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.v2-share-entry-remove {
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--v2-danger, #e74c3c);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.v2-share-entry-remove:hover {
  background: rgba(231, 76, 60, 0.1);
}

.v2-share-entry.owner .v2-share-entry-actions {
  color: var(--v2-text-muted);
  font-size: 12px;
  font-style: italic;
}

/* Profile page responsive */
@media (max-width: 768px) {
  .v2-profile-pane {
    padding: 16px;
  }

  .v2-profile-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .v2-profile-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .v2-access-summary-cards {
    flex-direction: column;
  }

  .v2-summary-card {
    min-width: 100%;
  }

  .v2-tab-buttons {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .btn-tab {
    flex-shrink: 0;
  }

  /* Subscription page responsive */
  .v2-sub-page {
    padding: 24px 12px 40px;
  }

  .v2-sub-header h1 {
    font-size: 24px;
  }

  .v2-sub-advisor-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .v2-sub-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .v2-sub-enterprise {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }

  .v2-sub-enterprise-features {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .v2-sub-enterprise-cta {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .v2-sub-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   Dark theme overrides
   ============================================================================ */

/* Profile cards */
.dark-theme .v2-profile-card {
  background: #111520;
  border-color: #1e2433;
}
.dark-theme .v2-profile-card-header {
  background: #161b26;
  border-color: #1e2433;
}
.dark-theme .v2-profile-card-header h3 { color: #e6e9f0; }
.dark-theme .v2-profile-card-body { background: #111520; color: #e6e9f0; }

/* Account page — ensure text labels are readable */
.dark-theme .v2-profile-card-body label { color: #8b92a5; }
.dark-theme .v2-profile-card-body p,
.dark-theme .v2-profile-card-body span { color: #e6e9f0; }

/* Branding page */
.dark-theme .v2-branding-logo-preview {
  background: #0c111a;
  border-color: #1e2433;
}
.dark-theme .v2-branding-logo-placeholder { color: #64748b; }

/* Access sharing — tab cards */
.dark-theme .v2-access-summary-card {
  background: #111520;
  border-color: #1e2433;
}
.dark-theme .v2-access-summary-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.dark-theme .v2-access-summary-card.active {
  background: #161b26;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px rgba(9,100,160,0.2);
}
.dark-theme .v2-access-summary-icon { color: #e6e9f0; }
.dark-theme .v2-access-summary-count { color: #e6e9f0; }
.dark-theme .v2-access-summary-label { color: #8b92a5; }

/* Billing — page header + subscription card headings
   Base rules use bare `var(--v2-text-primary)` / `var(--v2-text-muted)`
   with no fallback. When the billing page sits inside the V2 shell the
   vars resolve to the dark tokens, but the headings were still reading as
   dim grey against the card bg — pin to explicit near-white / muted-grey
   so the title + tagline have solid contrast. */
.dark-theme .v2-sub-header h1 { color: #f1f3f7 !important; }
.dark-theme .v2-sub-header p  { color: #b0b7c5 !important; }

/* Subscription-card CTA buttons — the outline variant uses bare
 * var(--v2-text-primary) / var(--v2-border), which page-level overrides
 * can flip to near-black on the billing card background. "Current Plan"
 * uses --current with muted text on transparent bg, also fragile. */
.dark-theme .v2-sub-card-btn--outline {
  color: #e6e9f0 !important;
  border-color: #252d3d !important;
  background: transparent !important;
}
.dark-theme .v2-sub-card-btn--outline:hover {
  color: #4db5e0 !important;
  border-color: #4db5e0 !important;
  background: rgba(77, 181, 224, 0.08) !important;
}
.dark-theme .v2-sub-card-btn--current {
  color: #e6e9f0 !important;
  border-color: #252d3d !important;
  background: transparent !important;
}

.dark-theme .v2-sub-card-btn--current:not([disabled]):hover {
  color: #fff !important;
  border-color: #4db5e0 !important;
  background: rgba(77, 181, 224, 0.15) !important;
}

.dark-theme .v2-sub-card-btn[disabled],
.dark-theme .v2-sub-card-btn[disabled]:hover {
  color: #8b92a5 !important;
  border-color: #252d3d !important;
  background: transparent !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.dark-theme .v2-sub-card-head h3  { color: #f1f3f7 !important; }
.dark-theme .v2-sub-card-tagline  { color: #b0b7c5 !important; }

/* Billing — subscription toggle */
.dark-theme .v2-sub-toggle-label { color: #8b92a5; }
.dark-theme .v2-sub-toggle-label.active { color: #e6e9f0; }

/* Billing — subscription cards */
.dark-theme .v2-sub-card {
  background: #111520;
  border-color: #1e2433;
}
.dark-theme .v2-sub-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.dark-theme .v2-sub-card--popular { border-color: var(--v2-accent); }
.dark-theme .v2-sub-price-amount { color: #e6e9f0; }
.dark-theme .v2-sub-price-period { color: #8b92a5; }
.dark-theme .v2-sub-feat { color: #c4c9d4; }

/* Billing — manage actions */
.dark-theme .v2-billing-action-item {
  background: #111520;
  border-color: #1e2433;
}
.dark-theme .v2-billing-action-item:hover {
  background: #161b26;
}
.dark-theme .v2-billing-action-icon {
  background: rgba(9,100,160,0.12);
}
.dark-theme .v2-billing-action-label { color: #e6e9f0; }
.dark-theme .v2-billing-action-desc { color: #8b92a5; }

/* =============================================================================
   USER MANAGEMENT EDITOR — DARK THEME
   The bare `var(--v2-bg-page)` / `var(--v2-bg-surface)` chain inside the user
   editor panel was being flattened to white on some browsers when the admin
   pane was mounted (the pane's `background` property was being painted over
   by the grid container). Pin every user-editor surface + text color to the
   explicit dark token so the "Loading user details..." state, the editor
   body, the per-card sections, and the role chips all render dark.
   ============================================================================= */

/* Full editor shell */
.dark-theme .v2-user-editor-panel {
  background: #0c111a !important;
  color: #e6e9f0;
}
.dark-theme .v2-user-editor-header {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-user-editor-header h3,
.dark-theme #editor-title {
  color: #f1f3f7 !important;
}
.dark-theme .v2-user-editor-header h3 i {
  color: #4db5e0 !important;
}
.dark-theme .v2-user-editor-close {
  color: #8b92a5;
}
.dark-theme .v2-user-editor-close:hover {
  color: #e6e9f0;
  background: rgba(255,255,255,0.05);
}
.dark-theme .v2-user-editor-body {
  background: #0c111a !important;
  color: #e6e9f0;
}
.dark-theme .v2-user-editor-footer {
  background: #111520 !important;
  border-color: #1e2433 !important;
}

/* Loading / error states that render inside the editor body */
.dark-theme .v2-user-editor-body .v2-admin-loading,
.dark-theme .v2-user-editor-body .v2-admin-error,
.dark-theme .v2-admin-loading {
  color: #b0b7c5 !important;
}
.dark-theme .v2-user-editor-body .v2-admin-loading i,
.dark-theme .v2-admin-loading i {
  color: #4db5e0 !important;
}

/* Per-card sections inside the editor grid */
.dark-theme .v2-user-editor-section {
  background: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme .v2-user-editor-section h4 {
  color: #b0b7c5 !important;
}
.dark-theme .v2-user-editor-section h4 i {
  color: #4db5e0 !important;
}

/* Form fields inside the editor */
.dark-theme .v2-user-form-field label {
  color: #b0b7c5 !important;
}
.dark-theme .v2-user-form-field input,
.dark-theme .v2-user-form-field select {
  background: #0c111a !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}
.dark-theme .v2-user-form-field input:disabled,
.dark-theme .v2-user-form-field select:disabled {
  background: #161b26 !important;
  color: #8b92a5 !important;
}
.dark-theme .v2-user-form-readonly {
  background: #161b26 !important;
  color: #e6e9f0 !important;
  border-color: #1e2433 !important;
}

/* Role / group chips */
.dark-theme .v2-admin-chip {
  background: #161b26 !important;
  border-color: #252d3d !important;
  color: #e6e9f0 !important;
}
.dark-theme .v2-admin-chip-label {
  color: #f1f3f7 !important;
}
.dark-theme .v2-admin-chip-info {
  color: #8b92a5 !important;
}
.dark-theme .v2-admin-chip-remove {
  color: #8b92a5;
}
.dark-theme .v2-admin-chip-remove:hover {
  color: #ef6a6a;
}

/* Admin list items (used alongside chips for groups) */
.dark-theme .v2-admin-list-item {
  background: #161b26 !important;
  border-color: #1e2433 !important;
  color: #e6e9f0 !important;
}

/* TinyMCE user notes editor — outer wrapper + toolbar chrome.
   The iframe body itself is styled via adminUsersPageV2.js content_style
   which reads document.documentElement.classList.contains('dark-theme'). */
.dark-theme #user-notes-container .tox-tinymce {
  border-color: #1e2433 !important;
  background: #0c111a !important;
}
.dark-theme #user-notes-container .tox:not([dir=rtl]),
.dark-theme #user-notes-container .tox .tox-editor-header,
.dark-theme #user-notes-container .tox .tox-toolbar,
.dark-theme #user-notes-container .tox .tox-toolbar__primary,
.dark-theme #user-notes-container .tox .tox-toolbar__overflow,
.dark-theme #user-notes-container .tox .tox-edit-area,
.dark-theme #user-notes-container .tox .tox-edit-area__iframe,
.dark-theme #user-notes-container .tox .tox-statusbar {
  background-color: #111520 !important;
  border-color: #1e2433 !important;
}
.dark-theme #user-notes-container .tox .tox-tbtn {
  color: #e6e9f0 !important;
}
.dark-theme #user-notes-container .tox .tox-tbtn svg {
  fill: #e6e9f0 !important;
}
.dark-theme #user-notes-container .tox .tox-tbtn:hover,
.dark-theme #user-notes-container .tox .tox-tbtn--enabled {
  background-color: #1e2433 !important;
  color: #4db5e0 !important;
}
.dark-theme #user-notes-container .tox .tox-tbtn:hover svg,
.dark-theme #user-notes-container .tox .tox-tbtn--enabled svg {
  fill: #4db5e0 !important;
}
.dark-theme #user-notes-container .tox .tox-toolbar__group {
  border-color: #1e2433 !important;
}