/**
 * MANAGER UI CSS
 * Dashboard interface for store managers
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f5f5f5;
  color: #333;
}

/* View Management */
.view {
  display: none;
  min-height: 100vh;
}

.view.active {
  display: flex;
}

/* Login Styles */
#login-view,
#signup-view {
  display: none;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  flex-direction: column;
}

#login-view.active,
#signup-view.active {
  display: flex;
}

.login-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login-card {
  background: white;
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 450px;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header h1 {
  color: #3B82F6;
  font-size: 2em;
  margin-bottom: 10px;
}

.login-header p {
  color: #999;
  font-size: 1.1em;
}

.login-form {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
  transition: border-color 0.3s;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 5px rgba(102, 126, 234, 0.2);
}

/* Stripe Elements styling */
.stripe-element {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.stripe-element.StripeElement--focus {
  border-color: #3B82F6;
  box-shadow: 0 0 5px rgba(102, 126, 234, 0.2);
}

.stripe-element.StripeElement--invalid {
  border-color: #e74c3c;
}

#card-errors {
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: 5px;
  min-height: 20px;
}

.payment-info-text {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 15px;
  font-size: 0.9em;
  color: #856404;
}

.form-group.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-group.checkbox input[type='checkbox'] {
  width: auto;
  cursor: pointer;
}

.form-group.checkbox label {
  margin: 0;
  cursor: pointer;
}

.form-group.checkbox label a {
  color: #3B82F6;
  text-decoration: none;
  font-weight: 500;
}

.form-group.checkbox label a:hover {
  text-decoration: underline;
}

/* Terms and Privacy Checkbox */
.terms-checkbox {
  margin-top: 15px;
  margin-bottom: 5px;
}

.terms-checkbox .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9em;
  color: #666;
  line-height: 1.4;
}

.terms-checkbox input[type='checkbox'] {
  width: auto;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.terms-checkbox a {
  color: #3B82F6;
  text-decoration: none;
  font-weight: 500;
}

.terms-checkbox a:hover {
  text-decoration: underline;
}

.divider {
  text-align: center;
  color: #999;
  margin: 30px 0;
  font-size: 0.9em;
}

/* Button Styles */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-link {
  background: none;
  color: #3B82F6;
  text-decoration: underline;
  padding: 8px 0;
}

.btn-link:hover {
  color: #2563EB;
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.9em;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-small:hover {
  background: #5568d3;
}

.btn-small.btn-secondary {
  background: #6c757d;
}

.btn-small.btn-secondary:hover {
  background: #545b62;
}

.full-width {
  width: 100%;
}

/* Dashboard Layout */
#dashboard-view {
  display: none !important;
  flex-direction: column;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#dashboard-view.active {
  display: flex !important;
  position: relative;
  z-index: 1;
}

.navbar {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}

.navbar-left h2 {
  color: #3B82F6;
  margin-bottom: 5px;
}

.navbar-left p {
  color: #999;
  font-size: 0.9em;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dashboard-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e0e0e0;
  padding: 20px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-menu {
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: all 0.3s;
  font-size: 1em;
  color: #666;
  text-align: left;
}

.nav-item:hover {
  background: #f5f5f5;
  color: #333;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: #3B82F6;
  font-weight: 600;
  border-left: 4px solid #3B82F6;
  padding-left: 11px;
}

.nav-item .icon {
  font-size: 1.3em;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.content-section h1 {
  color: #333;
  margin-bottom: 30px;
  font-size: 2em;
}

.section-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-row {
  margin: 1rem 0;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.search-input,
.form-input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.badge {
  background: #3B82F6;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 0.9em;
  white-space: nowrap;
}

/* Table Styles */
.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: #f5f5f5;
  border-bottom: 2px solid #e0e0e0;
}

.data-table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: #333;
}

.data-table td {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.data-table tbody tr:hover {
  background: #f9f9f9;
}

/* Sortable columns */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.data-table th.sortable:hover {
  background: #e8e8e8;
}

.sort-icon {
  font-size: 0.8em;
  opacity: 0.5;
  margin-left: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s;
}

.data-table th.sortable:hover .sort-icon {
  opacity: 1;
  background: #ddd;
}

/* Column filters */
.column-filter {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85em;
  margin-top: 4px;
  box-sizing: border-box;
}

.column-filter:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

#customers-filter-row th {
  padding: 8px 15px;
  background: #fafafa;
}

/* Checkbox column */
.checkbox-col {
  width: 40px;
  text-align: center;
}

.row-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

#customers-header-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* Bulk actions bar */
.bulk-actions-bar {
  transition: opacity 0.3s ease;
}

.bulk-actions-bar.hidden {
  display: none !important;
}

/* Bulk Customer Actions Modal */
#bulk-customer-actions-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
}

#bulk-customer-actions-modal .modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  width: 90%;
}

#bulk-customer-actions-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

#bulk-customer-actions-modal .modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

#bulk-customer-actions-modal .modal-header .close {
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
}

#bulk-customer-actions-modal .modal-body {
  padding: 1.5rem;
}

.bulk-action-btn:hover {
  border-color: #3B82F6 !important;
  background: #f0f7ff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.text-center {
  text-align: center;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.btn-small-action {
  padding: 6px 12px;
  font-size: 0.85em;
}

/* Settings Grid */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.settings-card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.settings-card h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.2em;
}

.settings-card p {
  margin: 10px 0;
  color: #666;
}

.settings-desc {
  font-size: 0.9em;
  color: #888;
  margin-bottom: 15px !important;
}

/* Promotion Container */
.promotion-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.current-media {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.current-media h3,
.upload-section h3 {
  color: #333;
  margin-bottom: 20px;
}

.media-preview {
  width: 100%;
  height: 300px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.media-preview img,
.media-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-preview .placeholder {
  color: #ccc;
  text-align: center;
}

.upload-section {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-upload {
  margin-bottom: 20px;
  padding: 30px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.file-upload:hover {
  border-color: #3B82F6;
  background: rgba(102, 126, 234, 0.05);
}

.file-upload input[type='file'] {
  display: none;
}

.file-upload label {
  cursor: pointer;
  display: block;
  margin: 10px 0;
}

.file-info {
  color: #999;
  font-size: 0.9em;
  margin-top: 10px;
}

/* ============================================
   MODERN COMMUNICATION CENTER STYLES
   ============================================ */

/* Header */
.comm-header {
  margin-bottom: 25px;
}

.comm-header h1 {
  font-size: 1.8em;
  color: #333;
  margin-bottom: 8px;
}

.comm-subtitle {
  color: #666;
  font-size: 1em;
}

/* Tab Navigation */
.comm-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 25px;
  background: #f5f5f5;
  padding: 8px;
  border-radius: 12px;
  flex-wrap: wrap;
}

.comm-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  color: #666;
  transition: all 0.2s ease;
}

.comm-tab:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #3B82F6;
}

.comm-tab.active {
  background: white;
  color: #3B82F6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-icon {
  font-size: 1.2em;
}

/* Main Container - Two Panel Layout */
.comm-main-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 25px;
  min-height: 600px;
}

/* Recipients Panel */
.comm-recipients-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.recipients-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.recipients-header h3 {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 12px;
}

.recipient-stats {
  display: flex;
  gap: 10px;
}

.stat-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85em;
}

.stat-badge.selected {
  background: #e8f5e9;
  color: #2e7d32;
}

.stat-badge.total {
  background: #e3f2fd;
  color: #1565c0;
}

.recipients-controls {
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}

.recipients-store-filter {
  flex: 1;
  min-width: 120px;
}

.recipients-actions {
  display: flex;
  gap: 5px;
}

.btn-action {
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.2s;
}

.btn-action:hover {
  background: #3B82F6;
  color: white;
  border-color: #3B82F6;
}

.recipients-search {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.recipients-search input {
  width: 100%;
}

.customer-filter-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  max-height: 300px;
}

/* Template Section */
.template-section {
  padding: 15px;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.template-section h4 {
  font-size: 0.95em;
  color: #333;
  margin-bottom: 12px;
}

.template-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-btn {
  padding: 10px 15px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9em;
  text-align: left;
  transition: all 0.2s;
}

.template-btn:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
  border-color: #3B82F6;
  transform: translateX(5px);
}

.customer-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.customer-filter-item:hover {
  background: #f5f5f5;
}

.customer-filter-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #3B82F6;
}

.customer-filter-item label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.customer-name {
  font-weight: 500;
  color: #333;
}

.customer-store {
  font-size: 0.8em;
  color: #999;
}

.customer-phone {
  font-size: 0.85em;
  color: #666;
}

/* Content Panel */
.comm-content-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.comm-tab-content {
  display: none;
  padding: 30px;
  height: 100%;
}

.comm-tab-content.active {
  display: block;
}

.comm-tab-content h2 {
  font-size: 1.4em;
  color: #333;
  margin-bottom: 8px;
}

.section-desc {
  color: #666;
  margin-bottom: 25px;
}

/* Compose Message Styles */
.message-composer {
  background: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
}

.composer-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 15px;
  background: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}

.toolbar-btn {
  padding: 8px 14px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #3B82F6;
  color: white;
  border-color: #3B82F6;
}

.message-textarea {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 20px;
  font-size: 1em;
  line-height: 1.6;
  resize: vertical;
  min-height: 200px;
}

.message-textarea:focus {
  outline: none;
  box-shadow: none;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f0f0f0;
  border-top: 1px solid #e0e0e0;
}

.char-counter {
  font-size: 0.9em;
  color: #666;
}

#sms-segments {
  color: #999;
  margin-left: 5px;
}

.btn-send {
  padding: 12px 30px;
  font-size: 1em;
}

/* Media Upload Styles */
.media-container {
  max-width: 600px;
}

.media-upload-zone {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  background: #fafafa;
  transition: all 0.3s;
  margin-bottom: 20px;
}

.media-upload-zone:hover,
.media-upload-zone.dragover {
  border-color: #3B82F6;
  background: rgba(102, 126, 234, 0.05);
}

.upload-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.upload-text {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 5px;
}

.upload-or {
  color: #999;
  margin: 10px 0;
}

.upload-btn {
  display: inline-block;
  cursor: pointer;
}

.upload-hint {
  margin-top: 15px;
  font-size: 0.85em;
  color: #999;
}

.media-preview-box {
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.media-preview-box.hidden {
  display: none;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #eee;
  font-weight: 500;
}

.btn-remove-media {
  background: #ff5252;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85em;
}

.btn-remove-media:hover {
  background: #ff1744;
}

.media-preview {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.media-preview img,
.media-preview video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
}

/* AI Assistant Styles */
.ai-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ai-header {
  margin-bottom: 20px;
}

.ai-chat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  min-height: 400px;
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ai-message {
  display: flex;
  gap: 12px;
  animation: slideIn 0.3s ease;
}

.ai-message.user {
  flex-direction: row-reverse;
}

.ai-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  flex-shrink: 0;
}

.ai-message.user .ai-avatar {
  background: #4CAF50;
}

.message-bubble {
  max-width: 70%;
  padding: 15px 18px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-message.user .message-bubble {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  color: white;
}

.message-bubble p {
  margin: 0;
  line-height: 1.5;
}

.message-bubble .mt-10 {
  margin-top: 10px;
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.suggestion-chip {
  padding: 8px 14px;
  background: #e8eaf6;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85em;
  color: #5c6bc0;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  background: #3B82F6;
  color: white;
}

.ai-input-area {
  display: flex;
  gap: 10px;
  padding: 15px;
  background: white;
  border-top: 1px solid #eee;
}

.ai-input {
  flex: 1;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 0.95em;
  resize: none;
  font-family: inherit;
}

.ai-input:focus {
  outline: none;
  border-color: #3B82F6;
}

.ai-send-btn {
  padding: 12px 25px;
  border-radius: 25px;
}

.ai-result {
  margin-top: 20px;
  background: #e8f5e9;
  border-radius: 10px;
  padding: 20px;
}

.ai-result.hidden {
  display: none;
}

.ai-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.ai-result-header h4 {
  color: #2e7d32;
  margin: 0;
}

.ai-result-actions {
  display: flex;
  gap: 8px;
}

.ai-result-text {
  width: 100%;
  min-height: 100px;
  padding: 15px;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  background: white;
  font-size: 0.95em;
  line-height: 1.6;
  resize: vertical;
}

/* History Styles */
.history-container {
  height: 100%;
}

.history-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.history-filters select,
.history-filters input {
  padding: 10px 15px;
}

.history-list {
  background: #f9f9f9;
  border-radius: 10px;
  min-height: 300px;
}

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.empty-hint {
  font-size: 0.9em;
  margin-top: 5px;
}

.history-item {
  display: flex;
  gap: 15px;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
}

.history-item:hover {
  background: white;
}

.history-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
}

.history-details {
  flex: 1;
}

.history-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.history-meta {
  font-size: 0.85em;
  color: #999;
}

/* Animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 900px) {
  .comm-main-container {
    grid-template-columns: 1fr;
  }
  
  .comm-recipients-panel {
    max-height: 300px;
  }
  
  .comm-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .comm-tab {
    white-space: nowrap;
  }
}

/* Legacy styles kept for compatibility */
.communication-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 25px;
}

.comm-card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comm-card h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.1em;
}

.info-text {
  margin-top: 15px;
  color: #999;
  font-size: 0.9em;
}

.ai-response {
  margin-top: 20px;
  padding: 15px;
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  border-radius: 5px;
}

.ai-response.hidden {
  display: none;
}

.ai-response h4 {
  color: #2e7d32;
  margin-bottom: 10px;
}

.ai-response p {
  color: #2e7d32;
  line-height: 1.6;
}

/* AI Chatbot Styles */
.ai-chatbot-card {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
}

.ai-intro {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
}

.ai-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ai-chat-messages {
  flex: 1;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  max-height: 350px;
  border: 1px solid #e0e0e0;
}

.ai-message {
  display: flex;
  margin-bottom: 12px;
  animation: fadeIn 0.3s ease-in;
}

.ai-message.user {
  justify-content: flex-end;
}

.ai-message.assistant {
  justify-content: flex-start;
}

.message-content {
  max-width: 80%;
  padding: 12px 15px;
  border-radius: 8px;
  word-wrap: break-word;
}

.ai-message.user .message-content {
  background: #3B82F6;
  color: white;
}

.ai-message.assistant .message-content {
  background: white;
  border: 1px solid #e0e0e0;
  color: #333;
}

.ai-message.assistant .message-content ul {
  margin: 10px 0;
  padding-left: 20px;
}

.ai-message.assistant .message-content li {
  margin: 5px 0;
  color: #333;
}

.ai-chat-input-area {
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
}

.ai-input-group {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.ai-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #3B82F6;
  border-radius: 5px;
  font-size: 0.95em;
  font-family: inherit;
  resize: vertical;
}

.ai-input:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ai-send-btn {
  height: auto;
  padding: 10px 20px;
  white-space: nowrap;
}

.ai-generated-promotion {
  background: #e8f5e9;
  border: 2px solid #4caf50;
  border-radius: 8px;
  padding: 15px;
  margin-top: 10px;
}

.ai-generated-promotion.hidden {
  display: none;
}

.ai-generated-promotion h4 {
  color: #2e7d32;
  margin-bottom: 12px;
}

.promotion-preview {
  margin-bottom: 12px;
}

.promotion-message {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid #4caf50;
  border-radius: 5px;
  font-size: 0.95em;
  background: white;
  color: #333;
  font-family: inherit;
  resize: vertical;
}

.promotion-actions {
  display: flex;
  gap: 10px;
}

.promotion-actions button {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Media Preview */
.media-preview-container {
  margin: 20px 0;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.media-preview-container.hidden {
  display: none;
}

.preview-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  font-size: 14px;
}

.media-preview {
  max-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 6px;
  overflow: hidden;
}

.media-preview img,
.media-preview video {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.file-hint {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

/* Customer Filter for Communications */
.customer-filter-container {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.customer-filter-container h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.filter-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-controls .btn-small {
  padding: 8px 16px;
  font-size: 13px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: #3B82F6;
  color: white;
  transition: background 0.2s;
}

.filter-controls .btn-small:hover {
  background: #1D4ED8;
}

.selected-count {
  font-size: 14px;
  color: #666;
  margin-left: auto;
}

.selected-count strong {
  color: #3B82F6;
  font-weight: 600;
}

.customer-filter-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: white;
  padding: 10px;
}

.customer-filter-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.customer-filter-item:last-child {
  border-bottom: none;
}

.customer-filter-item:hover {
  background: #f5f5f5;
}

.customer-filter-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #3B82F6;
}

.customer-filter-item label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  flex: 1;
}

.customer-name {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.customer-store {
  font-size: 12px;
  color: #3B82F6;
  font-weight: 500;
  margin-top: 2px;
}

.customer-phone {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

/* Info Box */
.info-box {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 25px;
}

.info-box p {
  color: #1565c0;
  margin: 8px 0;
}

.info-box.hidden {
  display: none;
}

/* Loading & Messages */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 999;
}

.loading.hidden {
  display: none;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading p {
  color: white;
  margin-top: 20px;
  font-size: 1.1em;
}

.error-message,
.success-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  display: block;
  animation: slideIn 0.3s ease-in;
  font-weight: 600;
}

.error-message {
  background: #f44336;
  color: white;
}

.success-message {
  background: #4caf50;
  color: white;
}

.error-message.hidden,
.success-message.hidden {
  display: none;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
  }
  to {
    transform: translateX(0);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .sidebar {
    width: 200px;
  }

  .promotion-container {
    grid-template-columns: 1fr;
  }

  .communication-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    display: none;
  }

  .sidebar.open {
    display: block;
  }

  .main-content {
    padding: 15px;
  }

  .navbar {
    flex-direction: column;
    gap: 10px;
  }

  .navbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .login-card {
    padding: 20px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .table-container {
    font-size: 0.9em;
  }

  .data-table th,
  .data-table td {
    padding: 10px;
  }
}

/* Store Switcher */
.store-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  padding: 8px 15px;
  border-left: 2px solid #3B82F6;
  background: rgba(102, 126, 234, 0.08);
  border-radius: 4px;
  /* Location selector styling */
}

.store-switcher label {
  color: #333;
  font-size: 0.95em;
  font-weight: 600;
  white-space: nowrap;
}

.store-dropdown {
  padding: 8px 12px;
  border-radius: 4px;
  border: 2px solid #3B82F6;
  background: white;
  color: #333;
  font-size: 0.9em;
  cursor: pointer;
  min-width: 200px;
  font-weight: 500;
  transition: all 0.2s;
}

.store-dropdown:hover {
  border-color: #2563EB;
  background: #f9f9f9;
}

.store-dropdown:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.store-dropdown option {
  background: white;
  color: #333;
  padding: 8px;
}

/* Reports Section */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.report-filters {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group label {
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.filter-group .form-input {
  min-width: 200px;
  padding: 8px 12px;
  border: 2px solid #3B82F6;
  border-radius: 5px;
}

.report-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.report-card h3 {
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #3B82F6;
  padding-bottom: 10px;
  font-size: 1.1em;
}

.chart-card {
  grid-column: span 1;
  min-height: 350px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
}

.stat-box {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: white;
}

.stat-label {
  display: block;
  font-size: 0.85em;
  opacity: 0.9;
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  font-size: 1.8em;
  font-weight: bold;
}

.retention-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.retention-box {
  background: #f0f4ff;
  border-left: 4px solid #3B82F6;
  border-radius: 5px;
  padding: 15px;
  text-align: center;
}

.retention-label {
  display: block;
  font-size: 0.9em;
  color: #666;
  margin-bottom: 8px;
}

.retention-value {
  display: block;
  font-size: 1.6em;
  font-weight: bold;
  color: #3B82F6;
}

.compact-table {
  font-size: 0.9em;
}

.compact-table td, .compact-table th {
  padding: 10px;
}

canvas {
  max-height: 300px;
}

.stat-value {
  display: block;
  font-size: 2em;
  font-weight: bold;
}

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

.activity-item {
  padding: 12px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.activity-item .activity-text {
  flex: 1;
}

.activity-item .activity-time {
  color: #888;
  font-size: 0.85em;
}

/* ============ STORES SECTION ============ */

.section-description {
  color: #666;
  margin-bottom: 20px;
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.store-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.store-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.store-card h3 {
  margin-bottom: 10px;
  color: #333;
}

.store-card p {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 5px;
}

.store-card .store-id {
  font-family: monospace;
  background: #f0f0f0;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.85em;
}

.store-card .store-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 600;
  margin-top: 10px;
}

.store-status.approved {
  background: #d4edda;
  color: #155724;
}

.store-status.pending {
  background: #fff3cd;
  color: #856404;
}

.store-status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.add-store-card {
  border: 2px dashed #ccc;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}

.add-store-card:hover {
  border-color: #3B82F6;
  background: #f5f5ff;
}

.add-store-icon {
  font-size: 2.5em;
  margin-bottom: 10px;
  color: #3B82F6;
}

.add-store-card h3 {
  color: #3B82F6;
}

.add-store-card p {
  color: #888;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.form-row.two-col {
  grid-template-columns: 1fr 1fr;
}

/* Payment Summary */
.payment-summary {
  background: #f8f9ff;
  border: 2px solid #3B82F6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.payment-summary h3 {
  color: #3B82F6;
  margin-bottom: 15px;
  font-size: 1.2em;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.total {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 2px solid #3B82F6;
  font-size: 1.1em;
  color: #3B82F6;
}

#payment-package-info {
  color: #3B82F6;
  font-weight: 600;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* Section Header with Button */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.section-header h1 {
  margin-bottom: 5px;
}

.section-header .section-description {
  margin-bottom: 0;
}

.section-header .header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Store ID Badge in Table */
.store-id-badge {
  font-family: monospace;
  background: #e8e8ff;
  color: #3B82F6;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9em;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 600;
}

.status-badge.approved, .status-badge.active {
  background: #d4edda;
  color: #155724;
}

.status-badge.pending, .status-badge.trialing {
  background: #fff3cd;
  color: #856404;
}

.status-badge.rejected, .status-badge.suspended, .status-badge.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.past_due {
  background: #fff3cd;
  color: #856404;
}

/* Account Status Section */
.status-display {
  margin-top: 16px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-row:last-child {
  border-bottom: none;
}

.status-label {
  font-weight: 500;
  color: var(--text-muted);
}

.status-value {
  font-weight: 600;
  color: var(--text-dark);
}

.subscription-info {
  line-height: 1.8;
  color: var(--text-muted);
}

.subscription-info strong {
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .store-switcher {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 10px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .section-header .btn {
    width: 100%;
  }
  
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .stores-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ MODAL STYLES ============ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal.hidden {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1001;
  width: 90%;
  max-width: 500px;
  animation: modalSlideIn 0.3s ease;
}

.modal-large {
  max-width: 700px;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.4em;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.8em;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 25px;
}

.modal-body .form-group {
  margin-bottom: 18px;
}

.modal-body .form-actions {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* ============ PAYMENT MODAL ============ */

.payment-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.payment-summary h3 {
  margin: 0 0 15px 0;
  font-size: 1.1em;
  color: #333;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.total {
  font-weight: 700;
  font-size: 1.2em;
  color: #3B82F6;
  padding-top: 15px;
  margin-top: 10px;
  border-top: 2px solid #3B82F6;
  border-bottom: none;
}

.payment-form h3 {
  margin: 0 0 15px 0;
  font-size: 1.1em;
  color: #333;
}

.demo-notice {
  background: #fff3cd;
  color: #856404;
  padding: 10px 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.9em;
  text-align: center;
}

.btn-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

/* Bulk Upload Styles */
.upload-instructions {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  border-left: 4px solid #3B82F6;
}

.instructions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 15px;
}

.instructions-header > div {
  flex: 1;
}

.instructions-header h3 {
  margin-top: 0;
  color: #333;
  font-size: 1.1em;
}

.instructions-header .btn {
  white-space: nowrap;
  margin-top: 0;
}

.upload-instructions h3 {
  margin-top: 0;
  color: #333;
  font-size: 1.1em;
}

.upload-instructions p {
  color: #666;
  margin: 10px 0;
  font-size: 0.95em;
}

.instruction-table {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 15px 0;
  overflow: hidden;
}

.instruction-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  padding: 12px;
  border-bottom: 1px solid #eee;
  font-size: 0.9em;
}

.instruction-row:first-child {
  background: #f5f5f5;
  font-weight: 600;
  color: #333;
}

.instruction-row:last-child {
  border-bottom: none;
}

.instruction-note {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 12px;
  border-radius: 4px;
  color: #856404;
  font-size: 0.9em;
  margin-top: 15px;
}

.upload-section {
  margin-bottom: 25px;
}

.upload-section h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.file-input-wrapper {
  position: relative;
  margin-bottom: 15px;
}

.file-input {
  display: none;
}

.file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  border: 2px dashed #3B82F6;
  border-radius: 8px;
  background: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.file-label:hover {
  background: #f0f0f0;
  border-color: #2563EB;
}

.file-label .icon {
  font-size: 2.5em;
}

.file-label span:nth-child(2) {
  font-weight: 600;
  color: #333;
  font-size: 1em;
}

.file-hint {
  font-size: 0.85em;
  color: #999;
}

.file-preview {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-preview p {
  color: #2e7d32;
  font-weight: 500;
  margin: 0;
}

.upload-progress {
  margin: 25px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.upload-progress h3 {
  margin-top: 0;
  color: #333;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin: 15px 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
  width: 0%;
  transition: width 0.3s;
}

#progress-text {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  margin: 0;
}

.upload-results {
  margin: 25px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.upload-results h3 {
  margin-top: 0;
  color: #333;
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.result-item {
  padding: 15px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.result-item.success {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  color: #2e7d32;
}

.result-item.warning {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  color: #856404;
}

.result-item.error {
  background: #ffebee;
  border-left: 4px solid #f44336;
  color: #c62828;
}

.result-item .label {
  flex: 1;
  font-size: 0.9em;
}

.result-item .count {
  font-size: 1.3em;
  margin-left: 10px;
}

.error-details {
  background: white;
  border: 1px solid #f44336;
  border-radius: 4px;
  padding: 15px;
  margin-top: 15px;
}

.error-details h4 {
  color: #c62828;
  margin-top: 0;
}

.error-details ul {
  margin: 10px 0;
  padding-left: 20px;
}

.error-details li {
  color: #666;
  font-size: 0.9em;
  margin: 5px 0;
}

.hidden {
  display: none !important;
}

/* Small button size */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.85em;
  border-radius: 4px;
}

/* Warning button style */
.btn-warning {
  background: #ff9800;
  color: white;
  border: none;
}

.btn-warning:hover {
  background: #e68900;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

/* Package Locked Feature Styles */
.nav-item.locked {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.nav-item.locked::after {
  content: '🔒';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

.feature-locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 12px;
}

.locked-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.locked-message {
  text-align: center;
  max-width: 400px;
}

.locked-message h3 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 1.4em;
}

.locked-message p {
  color: #666;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.btn-upgrade {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #333;
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.btn-upgrade:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

/* Current Package Display */
.package-display {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.package-display.bronze {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
}

.package-display.silver {
  background: linear-gradient(135deg, #C0C0C0, #808080);
}

.package-display.gold {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #333;
}

/* ============ CRM MODULE ============ */
.crm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.crm-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  position: relative;
}

.crm-card.wide {
  grid-column: 1 / -1;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.card-header h3 {
  margin: 0;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}

.crm-profiles {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}

.profile-card {
  border: 1px solid #eee;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-card.active {
  border-color: #3B82F6;
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.2);
}

.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.profile-card-body {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-detail {
  background: #f9f9ff;
  border: 1px solid #eef0ff;
  border-radius: 12px;
  padding: 14px;
}

.profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.profile-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.profile-history .list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
}

.timeline-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f0f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.timeline-title {
  font-weight: 600;
}

.segment-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 14px;
  background: #eef0ff;
  color: #4a55c2;
  font-size: 0.9em;
  font-weight: 600;
}

.chip.secondary {
  background: #f3f6f9;
  color: #556;
}

.chip.tertiary {
  background: #fff4e5;
  color: #b4690e;
}

.badge.success {
  background: #e6f7ed;
  color: #1e8a4f;
}

.badge.warning {
  background: #fff4e5;
  color: #b4690e;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.timeline-when {
  font-size: 0.9em;
}

.form-actions.compact {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.info-box.warning {
  background: #fff4e5;
  border: 1px solid #ffd9a6;
  color: #8a5800;
}

.nav-item.feature-locked {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}

.nav-item.feature-locked::after {
  content: '🔒';
  position: absolute;
  right: 12px;
}

/* ===============================================
   CONTACT US SECTION
   =============================================== */

.section-subtitle {
  color: #666;
  margin-bottom: 25px;
  font-size: 1.05em;
}

.contact-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

.contact-form-card,
.contact-info-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.contact-form-card h3,
.contact-info-card h3 {
  color: #333;
  margin-bottom: 25px;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-form-card textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  display: block;
  color: #888;
  font-size: 0.85em;
  margin-top: 5px;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.contact-method:last-of-type {
  border-bottom: none;
}

.contact-icon {
  font-size: 2em;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3B82F620 0%, #2563EB20 100%);
  border-radius: 12px;
}

.contact-details strong {
  display: block;
  color: #333;
  margin-bottom: 4px;
}

.contact-details p {
  color: #3B82F6;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.contact-details small {
  color: #888;
  font-size: 0.85em;
}

.contact-faq {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.contact-faq h4,
.contact-hours h4 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.faq-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-links li {
  margin-bottom: 10px;
}

.faq-links a {
  color: #3B82F6;
  text-decoration: none;
  font-size: 0.95em;
  transition: color 0.2s;
}

.faq-links a:hover {
  color: #2563EB;
  text-decoration: underline;
}

.contact-hours {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.hours-table {
  width: 100%;
  font-size: 0.9em;
}

.hours-table td {
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.hours-table td:first-child {
  color: #666;
}

.hours-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #333;
}

#submit-contact {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.05em;
  padding: 14px 24px;
}

@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}