/* =====================================================
   themes.css — Dark Mode + Custom Themes
   ===================================================== */

/* ─────────────────────────────────────────
   DARK MODE
───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:   #0f0f0f;
    --surface-2: #1a1a1a;
    --surface-3: #242424;
    --border:    #2e2e2e;
    --border-dark: #3d3d3d;
    --text:      #f0f0f0;
    --text-2:    #d0d0d0;
    --text-muted: #888888;
    --text-light: #555555;
    --white:     #0f0f0f;
    --dark:      #f0f0f0;
    --dark-2:    #f5f5f5;
  }
}

/* Manual Dark Mode Class */
[data-theme="dark"] {
  --surface:   #0f0f0f;
  --surface-2: #1a1a1a;
  --surface-3: #242424;
  --border:    #2e2e2e;
  --border-dark: #3d3d3d;
  --text:      #f0f0f0;
  --text-2:    #d0d0d0;
  --text-muted: #888888;
  --text-light: #555555;
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .page-header,
[data-theme="dark"] .dash-widget,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .svc-card,
[data-theme="dark"] .cat-card,
[data-theme="dark"] .payment-card,
[data-theme="dark"] .auth-form-panel,
[data-theme="dark"] .auth-simple-card,
[data-theme="dark"] .conversations-panel,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-input-area {
  background: #141414;
  border-color: #2e2e2e;
}

[data-theme="dark"] .data-table th { background: #1a1a1a; }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: #1a1a1a;
  border-color: #2e2e2e;
  color: #f0f0f0;
}
[data-theme="dark"] .btn-ghost { border-color: #2e2e2e; color: #d0d0d0; }
[data-theme="dark"] .btn-ghost:hover { background: #1a1a1a; }

/* ─────────────────────────────────────────
   MODAL (shared across themes)
───────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: backdrop-in .2s ease;
}
.modal-backdrop.is-open,
.modal-backdrop[aria-hidden="false"] {
  display: flex;
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop--dark { background: rgba(0,0,0,.85); }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  animation: modal-in .25s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-20px) scale(.97); } to { opacity: 1; transform: none; } }
.modal--sm   { max-width: 400px; }
.modal--md   { max-width: 560px; }
.modal--lg   { max-width: 720px; }
.modal--xl   { max-width: 900px; }
.modal--full { max-width: 100%; height: 100%; margin: 0; border-radius: 0; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title { font-size: 17px; font-weight: 700; color: var(--dark); }
.modal-title--center { text-align: center; flex: 1; }
.modal-close-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition);
}
.modal-close-btn:hover { background: var(--surface-2); color: var(--text); }
.modal-close-btn--floating {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(0,0,0,.6);
  color: var(--white);
  border-radius: 50%;
  z-index: 10;
}
.modal-close-btn--floating:hover { background: rgba(0,0,0,.8); }

.modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-footer--center { justify-content: center; }

/* Confirm Modal */
.modal-confirm-icon { text-align: center; padding: 28px 0 0; font-size: 56px; }
.modal-confirm-desc { text-align: center; padding: 0 24px; font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }

/* Image Preview */
.modal-image-preview {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-preview-img { max-width: 100%; max-height: 80vh; border-radius: var(--radius-md); }
.modal-preview-caption { text-align: center; color: rgba(255,255,255,.7); font-size: 13px; margin-top: 12px; }

/* Quick Msg Modal */
.quick-msg-recipient { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.quick-msg-avatar { width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--primary); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; }
.quick-msg-to { font-size: 13px; }
.quick-msg-to-label { color: var(--text-muted); }
.quick-msg-to-name { font-weight: 700; color: var(--text); }
.form-textarea { resize: vertical; }
.form-char-count { text-align: left; }

/* ─────────────────────────────────────────
   TOAST
───────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dark-2);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  pointer-events: all;
  position: relative;
  overflow: hidden;
  animation: toast-slide .3s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid rgba(255,255,255,.1);
}
@keyframes toast-slide { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }
.toast.removing, .toast.toast--exit { animation: toast-out .25s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(-20px) scale(.95); max-height: 0; padding: 0; margin: 0; overflow: hidden; } }

.toast--success { background: #0f2010; border-color: rgba(20,168,0,.3); }
.toast--error   { background: #1f0a0a; border-color: rgba(239,68,68,.3); }
.toast--warning { background: #1f1500; border-color: rgba(245,158,11,.3); }
.toast--info    { background: #060d1f; border-color: rgba(59,130,246,.3); }
.toast--loading { background: var(--dark-2); }

.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast--success .toast-icon { color: #4ade80; }
.toast--error   .toast-icon { color: #f87171; }
.toast--warning .toast-icon { color: #fbbf24; }
.toast--info    .toast-icon { color: #60a5fa; }
.toast--loading .toast-icon { color: var(--text-muted); }

.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
.toast-msg { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; }
.toast-action-btn {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.toast-action-btn:hover { color: #93c5fd; }

.toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
  transition: var(--transition);
  border-radius: var(--radius-sm);
}
.toast-close:hover { color: var(--white); background: rgba(255,255,255,.1); }

.toast-progress {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  height: 3px;
  background: rgba(255,255,255,.15);
  transform-origin: right;
  animation: toast-progress linear forwards;
}
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ─────────────────────────────────────────
   PAGE LOADER
───────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity .4s, visibility .4s;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader-logo { display: flex; align-items: center; gap: 10px; }
.page-loader-logo-icon { font-size: 32px; color: var(--primary); }
.page-loader-logo-text { font-family: var(--font-display); font-size: 26px; font-weight: 900; color: var(--dark); }
.page-loader-logo-text strong { color: var(--primary); }
.page-loader-bar {
  width: 200px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.page-loader-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  animation: loader-fill 1.5s ease-in-out infinite;
}
@keyframes loader-fill { 0% { width: 0; margin-right: 100%; } 50% { width: 60%; margin-right: 40%; } 100% { width: 0; margin-right: 0; } }
.page-loader-msg { font-size: 13px; color: var(--text-muted); }

/* ─────────────────────────────────────────
   SKELETON LOADERS
───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.skeleton-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.skeleton-thumb { height: 160px; border-radius: 0; }
.skeleton-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-row { display: flex; align-items: center; gap: 8px; }
.skeleton-row--spread { justify-content: space-between; }
.skeleton-avatar-sm { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.skeleton-avatar-lg { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.skeleton-text { height: 14px; }
.skeleton-text--short  { width: 80px; }
.skeleton-text--medium { width: 140px; }
.skeleton-text--long   { width: 100%; }
.skeleton-text--price  { width: 60px; }
.skeleton-text--name   { width: 160px; height: 20px; }
.skeleton-text--number { width: 100px; height: 32px; }
.skeleton-badge  { width: 70px; height: 22px; border-radius: var(--radius-full); }
.skeleton-btn    { width: 80px; height: 30px; border-radius: var(--radius-full); }
.skeleton-icon   { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.skeleton-bubble { height: 48px; border-radius: 18px; width: 200px; }
.skeleton-bubble--sm { width: 140px; }
.skeleton-bubble--lg { width: 260px; }
.skeleton-stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.skeleton-stat-header { display: flex; justify-content: space-between; align-items: flex-start; }

.skeleton-profile { display: flex; gap: 20px; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
.skeleton-profile-info { flex: 1; display: flex; flex-direction: column; gap: 12px; }

.skeleton-message { display: flex; gap: 8px; }
.skeleton-message--sent { flex-direction: row-reverse; }

.skeleton-notif { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.skeleton-notif-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* ─────────────────────────────────────────
   INLINE SPINNER
───────────────────────────────────────── */
.inline-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  color: var(--text-muted);
}
.spinner-svg { width: 36px; height: 36px; animation: spin .8s linear infinite; }
.spinner-track { stroke: var(--border); }
.spinner-fill  { stroke: var(--primary); stroke-dasharray: 90 150; stroke-dashoffset: 0; animation: spinner-dash 1.5s ease-in-out infinite; }
@keyframes spinner-dash {
  0%   { stroke-dasharray: 1 150; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90 150; stroke-dashoffset: -35px; }
  100% { stroke-dasharray: 90 150; stroke-dashoffset: -124px; }
}
.spinner-text { font-size: 13px; }