/**
 * Chattu — Bootstrap 5 + Toastify polish.
 * Load after: bootstrap.min.css, app-tokens.css, chattu-global.css
 */

/* —— Toastify (all chattu pages) —— */
html.chattu .toastify {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-toast) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 14px 18px !important;
  max-width: min(420px, calc(100vw - 2rem)) !important;
}

html.chattu .toastify.on {
  opacity: 1 !important;
}

html.chattu .toast-close {
  opacity: 0.85 !important;
}

html.chattu.chattu-light .toastify {
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}

html.chattu.chattu-light .toastify a {
  color: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* —— Dark app shell (dashboard, admin, chat) —— */
html.chattu.chattu-app {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg-app);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-emphasis-color: var(--text-primary);
  --bs-border-color: var(--border-subtle);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: #25d366;
  --bs-primary-rgb: 37, 211, 102;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #4ade80;
  --bs-success: #10b981;
  --bs-success-rgb: 16, 185, 129;
  --bs-info: #22d3ee;
  --bs-info-rgb: 34, 211, 238;
  --bs-warning: #fbbf24;
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger: #f87171;
  --bs-danger-rgb: 248, 113, 113;
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-heading-color: var(--text-primary);
  --bs-form-control-bg: var(--bg-muted);
  --bs-form-control-disabled-bg: rgba(51, 65, 85, 0.5);
  --bs-form-select-bg: var(--bg-muted);
  --bs-form-valid-color: #6ee7b7;
  --bs-form-invalid-color: #fca5a5;
  /* Tables */
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
  --bs-table-active-color: var(--text-primary);
  --bs-table-active-bg: rgba(37, 211, 102, 0.12);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: rgba(37, 211, 102, 0.08);
  --bs-table-border-color: var(--border-subtle);
  /* Modals */
  --bs-modal-bg: var(--bg-elevated);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--border-subtle);
  --bs-modal-header-border-color: var(--border-subtle);
  --bs-modal-footer-border-color: var(--border-subtle);
  /* Dropdowns */
  --bs-dropdown-bg: var(--bg-elevated);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-link-color: var(--text-secondary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-dropdown-border-color: var(--border-subtle);
  /* Tooltips & popovers */
  --bs-tooltip-bg: #1e293b;
  --bs-tooltip-color: #f1f5f9;
  --bs-popover-bg: var(--bg-elevated);
  --bs-popover-body-color: var(--text-secondary);
  --bs-popover-border-color: var(--border-subtle);
  --bs-popover-header-bg: var(--bg-muted);
  --bs-popover-header-color: var(--text-primary);
  /* List groups / cards Bootstrap uses */
  --bs-card-bg: var(--bg-card);
  --bs-card-border-color: var(--border-subtle);
  --bs-card-cap-bg: rgba(0, 0, 0, 0.15);
  --bs-list-group-bg: var(--bg-elevated);
  --bs-list-group-color: var(--text-primary);
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-hover-bg: rgba(255, 255, 255, 0.05);
  /* Pagination */
  --bs-pagination-bg: var(--bg-muted);
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-border-color: var(--border-subtle);
  --bs-pagination-hover-bg: rgba(37, 211, 102, 0.15);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-focus-box-shadow: var(--focus-ring);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-active-color: #042f1f;
  /* Alerts (tinted glass) */
  --bs-alert-border-radius: var(--radius-md);
}

html.chattu.chattu-app .form-control,
html.chattu.chattu-app .form-select {
  color: var(--text-primary);
  border-color: var(--border-subtle);
  background-color: var(--bg-muted);
}

html.chattu.chattu-app .form-control::placeholder {
  color: var(--text-muted);
}

html.chattu.chattu-app .form-control:focus,
html.chattu.chattu-app .form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background-color: var(--bg-muted);
  color: var(--text-primary);
}

html.chattu.chattu-app .form-control:disabled,
html.chattu.chattu-app .form-select:disabled {
  opacity: 0.65;
}

html.chattu.chattu-app .form-label,
html.chattu.chattu-app .col-form-label {
  color: var(--text-secondary);
  font-weight: 500;
}

html.chattu.chattu-app .input-group-text {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

html.chattu.chattu-app .btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-color: #042f1f;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
}

html.chattu.chattu-app .btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: rgba(37, 211, 102, 0.45);
  --bs-btn-hover-bg: rgba(37, 211, 102, 0.15);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #e8fdf0;
  --bs-btn-active-bg: rgba(37, 211, 102, 0.25);
  --bs-btn-active-color: #fff;
}

html.chattu.chattu-app .btn-secondary {
  --bs-btn-bg: var(--bg-muted);
  --bs-btn-border-color: var(--border-subtle);
  --bs-btn-color: var(--text-primary);
  --bs-btn-hover-bg: #475569;
  --bs-btn-hover-border-color: var(--border-subtle);
}

html.chattu.chattu-app .table {
  vertical-align: middle;
}

html.chattu.chattu-app .table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom-width: 1px;
  white-space: nowrap;
}

html.chattu.chattu-app .table td {
  color: var(--text-primary);
}

html.chattu.chattu-app .table-responsive {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

html.chattu.chattu-app .modal-content {
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

html.chattu.chattu-app .modal-header .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}

html.chattu.chattu-app .modal-header .btn-close:hover {
  opacity: 1;
}

html.chattu.chattu-app .dropdown-menu {
  box-shadow: var(--shadow-toast);
  padding: 0.35rem;
}

html.chattu.chattu-app .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
}

html.chattu.chattu-app .dropdown-item:active {
  background-color: rgba(37, 211, 102, 0.2);
  color: var(--text-primary);
}

html.chattu.chattu-app .alert {
  border-width: 1px;
  border-radius: var(--radius-md);
}

html.chattu.chattu-app .alert-primary {
  --bs-alert-bg: rgba(37, 211, 102, 0.12);
  --bs-alert-border-color: rgba(37, 211, 102, 0.35);
  --bs-alert-color: #d1fae5;
}

html.chattu.chattu-app .alert-success {
  --bs-alert-bg: rgba(16, 185, 129, 0.12);
  --bs-alert-border-color: rgba(16, 185, 129, 0.35);
  --bs-alert-color: #a7f3d0;
}

html.chattu.chattu-app .alert-warning {
  --bs-alert-bg: rgba(251, 191, 36, 0.12);
  --bs-alert-border-color: rgba(251, 191, 36, 0.35);
  --bs-alert-color: #fde68a;
}

html.chattu.chattu-app .alert-danger {
  --bs-alert-bg: rgba(248, 113, 113, 0.12);
  --bs-alert-border-color: rgba(248, 113, 113, 0.35);
  --bs-alert-color: #fecaca;
}

html.chattu.chattu-app .alert-info {
  --bs-alert-bg: rgba(34, 211, 238, 0.1);
  --bs-alert-border-color: rgba(34, 211, 238, 0.3);
  --bs-alert-color: #a5f3fc;
}

html.chattu.chattu-app .text-muted {
  color: var(--text-muted) !important;
}

html.chattu.chattu-app .card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
}

html.chattu.chattu-app .list-group-item {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

html.chattu.chattu-app .nav-tabs .nav-link {
  color: var(--text-muted);
  border-color: transparent;
}

html.chattu.chattu-app .nav-tabs .nav-link:hover {
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

html.chattu.chattu-app .nav-tabs .nav-link.active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-subtle) var(--border-subtle) transparent;
}

html.chattu.chattu-app .progress {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
}

/* —— Light shell (login / register) —— */
html.chattu.chattu-light {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg-app);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-border-color: var(--border-subtle);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-primary: #25d366;
  --bs-primary-rgb: 37, 211, 102;
  --bs-link-color: #16a34a;
  --bs-link-hover-color: var(--accent-hover);
  --bs-form-control-bg: #fff;
  --bs-form-select-bg: #fff;
}

html.chattu.chattu-light .form-control:focus,
html.chattu.chattu-light .form-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

html.chattu.chattu-light .btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-color: #042f1f;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
}

html.chattu.chattu-light .btn-outline-primary {
  --bs-btn-color: #15803d;
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: rgba(37, 211, 102, 0.12);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-hover-color: #065f46;
}