/* /app/assets/styles.css — for public user-facing pages */

body {
  background: #1e293b;
  color: white;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 2rem;
}

/* Base look (no font-size here so we can control per-button) */
button,
.upload-button {
  padding: 0.6rem 1.2rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

/* Hover for both */
button:hover,
.upload-button:hover {
  background-color: #2563eb;
}

/* Individually control sizes */
.upload-button {              /* "Click to Choose File" */
  font-size: 1rem;            /* you can bump this up if you want */
}

.primary-btn {                /* "Upload & Personalize" */
  font-size: 1.1rem;            /* independent from .upload-button */
}

/* Disabled/active states for the submit button */
.primary-btn {
  background-color: #9ca3af;      /* gray when disabled */
  cursor: not-allowed;
  opacity: 0.8;
}

.primary-btn.is-active {           /* deep green when enabled */
  background-color: #065f46;
  cursor: pointer;
  opacity: 1;
}

.primary-btn.is-active:hover {
  background-color: #064e3b;
}

.primary-btn:disabled {
  background-color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

/* Existing .btn styles (nav/admin/logout) unchanged */
.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #3b82f6;
  text-decoration: none;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn.red {
  background: #ef4444;
  color: white;
}

.btn.green {
  background: #10b981;
  color: white;
}

.btn.small {
  padding: 4px 10px;
  font-size: 0.85rem;
  white-space: nowrap;
  min-width: 100px;
}

.btn:hover {
  opacity: 0.9;
}


/* Table styles */
table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  word-wrap: break-word;
}
th,
td {
  padding: 0.5rem;
  border-bottom: 1px solid #475569;
  text-align: left;
  word-break: break-word;
}
.green { color: #4ade80; }
.orange { color: #fbbf24; }
.yellow { color: #facc15; }
.red-text { color: #f87171; }

/* Upload area */
.upload-box {
  text-align: center;
  margin-bottom: 2rem;
}
#drop-area {
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  background-color: #475569;
  padding: 2rem;
  text-align: center;
  transition: background 0.3s, border-color 0.3s;
}
#drop-area.dragover {
  background-color: #64748b;
  border-color: #cbd5e1;
}

/* Dashboard container */
.dashboard {
  max-width: 700px;
  margin: auto;
  background: #334155;
  padding: 2rem;
  border-radius: 12px;
  overflow-x: auto; /* NEW */
}

/* Links */
.link-yellow {
  color: #facc15;
  text-decoration: none;
  font-weight: bold;
}
.link-yellow:hover {
  color: #fde68a;
  text-decoration: underline;
}
.logout {
  display: inline-block;
  margin-top: 1.5rem;
  color: #f87171;
  text-decoration: none;
}

/* batch_prompt page */
.box {
  background: #334155;
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  margin: auto;
}
.warning {
  margin-top: 1rem;
  color: #facc15;
  font-weight: bold;
}
#loadingModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  text-align: center;
  color: white;
}
#loadingModal .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.spinner {
  margin: 1rem auto;
  border: 6px solid #ccc;
  border-top: 6px solid #22c55e; /* emerald green */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Progress widget */
.progress-wrap { margin-top: 1rem; }
.progress-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.95rem; color: #e5e7eb;
}
.progress-outer {
  width: 100%; height: 12px; border-radius: 9999px;
  background: #111827; border: 1px solid #1f2937; overflow: hidden;
  margin-top: 6px;
}
.progress-inner {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #facc15, #f59e0b);
  transition: width 0.4s ease;
}
.progress-sub { margin-top: 6px; font-size: 0.85rem; color: #9ca3af;
}

/* map_fields page */
.container {
  max-width: 600px;
  margin: auto;
  background: #334155;
  padding: 2rem;
  border-radius: 12px;
}
.container label {
  display: block;
  margin-top: 1rem;
}
.container select {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border-radius: 6px;
}
.container button {
  margin-top: 2rem;
  padding: 0.75rem 1.5rem;
  background: #10b981;
  border: none;
  border-radius: 6px;
}
.container button:hover {
  background: #059669;
}

/* upload_csv confirmation page */
.box {
  background: #334155;
  display: inline-block;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
}
.box form {
  margin-top: 1rem;
}
.box button {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: #facc15;
  color: black;
}
.box a {
  color: #60a5fa;
  display: inline-block;
  margin-top: 1rem;
  text-decoration: none;
}

/* login.php */
.login-box {
  background: #334155;
  padding: 2rem;
  border-radius: 10px;
  width: 450px; /* slightly wider for breathing room */
  text-align: center;
  margin: 50px auto;
  box-sizing: border-box;
}

.login-box input,
.login-box button {
  box-sizing: border-box;
}

.login-box input[type="text"],
.login-box input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 0.5rem 0;
  border: none;
  border-radius: 5px;
  background: white;
  color: black;
}
.login-box input::placeholder {
  color: #6b7280;
}
.login-box button {
  width: 100%;
  padding: 10px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}
.error {
  color: #f87171;
  margin-top: 1rem;
}
.forgot-password {
  margin-top: 1rem;
  font-size: 0.85rem;
}
.forgot-password a {
  color: #93c5fd;
  text-decoration: none;
}
/* Centering logic specifically for batch_prompt.php */
body.centered-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}

/* Upgrade Plans Page */
.upgrade-container {
  max-width: 900px;
  margin: auto;
  background: #334155;
  padding: 2rem;
  border-radius: 12px;
}

.upgrade-heading {
  text-align: center;
  margin-bottom: 2rem;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.plan-box {
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  background: #f9f9f9;
	  color: #1e293b; /* A dark slate color for good contrast */
}

.plan-box.current {
  border-color: green;
  background-color: #e7ffe7;
}
.plan-box .btn {
  margin-top: 1rem;
}

.plan-box:hover {
  transform: translateY(-5px);
}

.plan-box h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.plan-box .price {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Inactive plan boxes show price in green */
.plan-box:not(.active) .price {
  color: #059669;
}

/* Active plan box (current) keeps yellow price */
.plan-box.active .price {
  color: #facc15;
}
.plan-box .features {
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
}
.plan-box .current-label {
  background: #10b981;
  color: black;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  display: inline-block;
}
.plan-box .action-button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.plan-box .action-button:hover {
  background-color: #2563eb;
}
.plan-box .cancel-button {
  background: #ef4444;
}
.plan-box .cancel-button:hover {
  background: #dc2626;
}
.plan-box.active {
  background: #14532d;
  color: white;
}

/* Clean flex layout for inline action links */
.actions {
  white-space: nowrap;
  width: 1%;
}

.actions .action-links {
  display: flex;
  align-items: center;
  white-space: nowrap;
}



.processed-files-table td.filename-cell {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.processed-files-table td.filename-cell:hover {
  cursor: help;
}

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8fafc;
  padding: 2rem;
  box-sizing: border-box;
}

/* --- Top navigation (inside dashboard container) --- */
.top-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;

  /* dark, subtle contrast vs .dashboard background */
  background: linear-gradient(180deg, #243142 0%, #223043 100%);
  border: 1px solid #3a495d;
}

.top-nav__link {
  display: block;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;

  /* readable, friendly colors on dark */
  color: #e5e7eb;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, transform 0.03s ease;
}

/* Vertical separators (only for middle and right cells) */
.top-nav__link + .top-nav__link {
  border-left: 1px solid #3a495d;
}

/* Hover/active states */
.top-nav__link:hover {
  background: #37475f;
  color: #ffffff;
}

.top-nav__link:active {
  transform: translateY(1px);
}

/* Current page highlight */
.top-nav__link.is-active {
  background: #0f172a;          /* deep slate highlight */
  color: #facc15;               /* your brand yellow */
}

/* Training → Video table */
.video-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 15px; /* 15px vertical space between rows */
}

.video-cell {
  background: #1AB0FF;         /* dark card - was #0f172a */
  border: 1px solid #1f2937;   /* subtle border */
  border-radius: 10px;
  padding: 3px;   /* was 16px */
  width: 100%;
  box-sizing: border-box;
}

/* Make iframes/videos scale nicely */
.video-cell iframe,
.video-cell video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  border-radius: 8px;
}

/* Optional: reduce outer box padding on very small screens if needed */
@media (max-width: 480px) {
  .video-cell {
    padding: 12px;
  }
}

/* Progress widget */
.progress-wrap { margin-top: 1rem; }
.progress-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.95rem; color: #e5e7eb;
}
.progress-outer {
  width: 100%; height: 12px; border-radius: 9999px;
  background: #111827; border: 1px solid #1f2937; overflow: hidden;
  margin-top: 6px;
}
.progress-inner {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #facc15, #f59e0b);
  transition: width 0.4s ease;
}
.progress-sub { margin-top: 6px; font-size: 0.85rem; color: #9ca3af;
}