/* ==========================================================================
   SPEEDMATH - LEARN PAGE STYLESHEET (Refactored & Optimized)
   Styles for learning hub, tables, powers, formulas, and educational content
   ========================================================================== */

/* Import CSS Variables */
@import url('variables.css');

/* ==========================================================================
   1. LEARN HUB CONTAINER
   ========================================================================== */

.learn-container {
  margin-bottom: var(--space-8);
}

/* Learn Intro Text */
.learn-intro {
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--text-soft);
}

.learn-intro strong {
  color: var(--text-main);
}

/* ==========================================================================
   2. LEARN GRID & CARDS
   ========================================================================== */

/* Hub Cards Grid */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* Learn Card */
.learn-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.learn-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 249, 0.8);
  box-shadow: var(--shadow-lg);
}

/* Card Header */
.learn-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Card Icon with Gradient Backgrounds */
.learn-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
  flex-shrink: 0;
}

/* Card Icon Color Variants */
.learn-card-icon.blue { background: var(--gradient-blue); }
.learn-card-icon.orange { background: var(--gradient-orange); }
.learn-card-icon.green { background: var(--gradient-green); }
.learn-card-icon.purple { background: var(--gradient-purple); }
.learn-card-icon.pink { background: linear-gradient(135deg, #ec4899, #f97316); }
.learn-card-icon.teal { background: linear-gradient(135deg, #14b8a6, #22c55e); }

/* Card Content */
.learn-card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--text-main);
}

.learn-card-tagline {
  font-size: 14px;
  color: var(--text-muted);
}

.learn-card-text {
  font-size: var(--fs-base);
  color: var(--text-soft);
  line-height: var(--lh-normal);
}

/* Card Meta Badges */
.learn-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.learn-badge {
  font-size: 11px;
  padding: 3px var(--space-2);
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-soft);
  text-transform: capitalize;
  font-weight: var(--fw-semibold);
}

/* Card Footer */
.learn-card-footer {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}

/* Link Button */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: #0ea5e9;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--admin-hover-bg);
  border: 1px solid var(--border-subtle);
  transition: var(--transition-base);
}

.btn-link .lucide {
  width: 15px;
  height: 15px;
}

.btn-link:hover {
  background: var(--admin-active-bg);
  border-color: rgba(59, 130, 249, 0.6);
  transform: translateY(-2px);
}

/* ==========================================================================
   3. TABLES MODULE - RANGE TABS
   ========================================================================== */

.tables-sqc-title {
  margin-top: var(--space-5);
}

/* Range Tab Navigation */
.tables-range-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-5);
  margin-top: 10px;
}

.tables-range-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) var(--space-5);
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--admin-hover-bg);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  box-shadow: var(--shadow-md);
}

.tables-range-tab .lucide {
  width: 15px;
  height: 15px;
}

.tables-range-tab:hover {
  background: var(--admin-active-bg);
  border-color: var(--accent-primary);
}

/* Active Tab with Gradient */
.tables-range-tab.active {
  border: none;
  background: var(--btn-gradient);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
}

/* Range Panels */
.tables-range-panel {
  display: none;
}

.tables-range-panel.active {
  display: block;
}

/* Tables Wrapper with Scroll */
.tables-wrapper {
  margin-top: var(--space-4);
  overflow-x: auto;
}

/* ==========================================================================
   4. MULTIPLICATION TABLES
   ========================================================================== */

.tables-main {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
}

.tables-main th,
.tables-main td {
  border: 1px solid var(--border-subtle);
  padding: 6px 10px;
  text-align: center;
  font-size: 16px;
  color: var(--text-main);
}

/* Header Row Styling */
.tables-main thead th {
  background: var(--admin-hover-bg);
  font-weight: var(--fw-bold);
}

/* Body Rows - Zebra Striping */
.tables-main tbody tr:nth-child(odd) td {
  background: var(--bg-section);
}

.tables-main tbody tr:nth-child(even) td {
  background: var(--bg-card);
}

/* Left Column Header (Multiplier) */
.tables-left-head {
  background: #0ea5e9;
  color: #ffffff;
  font-weight: var(--fw-bold);
  width: 70px;
}

/* ==========================================================================
   5. SQUARES & CUBES TABLE
   ========================================================================== */

.sqc-main {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  margin-top: var(--space-4);
}

.sqc-main th,
.sqc-main td {
  border: 1px solid var(--border-subtle);
  padding: 6px 10px;
  text-align: center;
  font-size: 16px;
  color: var(--text-main);
}

/* Header Row - Default Background */
.sqc-main thead th {
  background: var(--admin-hover-bg);
  font-weight: var(--fw-bold);
}

/* Body Cells */
.sqc-main tbody td {
  background: var(--bg-section);
}

/* Special Colored Headers (Override Defaults) */
.sqc-head-blue {
  background: #0ea5e9 !important;
  color: #ffffff !important;
  font-weight: var(--fw-bold);
}

.sqc-head-peach {
  background: #ffe0cc !important;
  font-weight: var(--fw-bold);
  color: #111827 !important;
}

.sqc-head-blue-lite {
  background: #e0f2ff !important;
  font-weight: var(--fw-bold);
  color: #111827 !important;
}

/* Highlight Square Values in Red */
.sqc-square {
  color: #f97373;
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   6. POWERS TABLE
   ========================================================================== */

.powers-main {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  margin-top: var(--space-4);
}

.powers-main th,
.powers-main td {
  border: 1px solid var(--border-subtle);
  padding: 6px 10px;
  text-align: center;
  font-size: 16px;
  color: var(--text-main);
}

/* Header Row Background */
.powers-main thead th {
  background: var(--admin-hover-bg);
  font-weight: var(--fw-bold);
}

/* Alternating Column Header Colors (Peach/Blue Pattern) */
.powers-head-number:nth-child(2),
.powers-head-number:nth-child(4),
.powers-head-number:nth-child(6),
.powers-head-number:nth-child(8) {
  background: #ffe0cc;
  color: #111827;
}

.powers-head-number:nth-child(3),
.powers-head-number:nth-child(5),
.powers-head-number:nth-child(7),
.powers-head-number:nth-child(9) {
  background: #e0f2ff;
  color: #111827;
}

/* Body Cells Background */
.powers-main tbody td {
  background: var(--bg-section);
}

/* ==========================================================================
   7. FORMULAS PAGE
   ========================================================================== */



/* Formula Panels */
.formula-panel {
  display: none;
  margin-top: var(--space-4);
}

.formula-panel.active {
  display: block;
}

/* Formula Section Title */
.formula-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
  color: var(--text-main);
}

/* Formula List Container */
.formula-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.formula-list li {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Equal columns for name and formula */
  gap: var(--space-3);
  padding: 10px var(--space-4);
  font-size: var(--fs-md);
  align-items: center;
}

/* Zebra Striping for Formula List */
.formula-list li:nth-child(odd) {
  background: var(--bg-section);
}

.formula-list li:nth-child(even) {
  background: var(--bg-card);
}

/* Formula Name & Expression */
.formula-name {
  font-weight: var(--fw-bold);
  color: var(--text-main);
}

.formula-exp {
  color: var(--text-soft);
  font-weight: 600;
}

/* ==========================================================================
   8. SPECIAL TRICK TABLES (VEDIC, GEOMETRY, TRIGONOMETRY)
   ========================================================================== */

/* Wider Left Column for Vedic Multiplication Tricks */
.tables-range-panel[data-trick="vedic-mul"] th.tables-left-head,
.tables-range-panel[data-trick="vedic-mixed"] th.tables-left-head {
  width: 200px;
  white-space: nowrap;
}

/* Wider Left Column for Geometry & Trigonometry Tables */
.tables-range-panel[data-gt] th.tables-left-head {
  width: 200px;
  white-space: nowrap;
}

/* ==========================================================================
   9. RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet & Below (960px) */
@media (max-width: 960px) {
  /* Learn Grid - 2 Columns */
  .learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Tables - Remove Min Width */
  .tables-main,
  .sqc-main,
  .powers-main {
    min-width: 100%;
  }
}

/* Mobile (640px and below) */
@media (max-width: 640px) {
  
  /* Learn Grid - Single Column */
  .learn-grid {
    grid-template-columns: 1fr;
  }
  
  /* Range Tabs - Horizontal Scroll */
  .tables-range-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Formula List - Stack Columns */
  .formula-list li {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .formula-name {
    padding-bottom: var(--space-1);
    border-bottom: 1px dashed var(--border-subtle);
  }
  
  /* Card Padding Reduction */
  .learn-card {
    padding: var(--space-4);
  }
}

/* Extra Small Mobile (480px and below) */
@media (max-width: 480px) {
  /* Reduce Card Icon Size */
  .learn-card-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  /* Smaller Card Title */
  .learn-card-title {
    font-size: var(--fs-md);
  }
  
  /* Table Font Size Reduction */
  .tables-main th,
  .tables-main td,
  .sqc-main th,
  .sqc-main td,
  .powers-main th,
  .powers-main td {
    font-size: 14px;
    padding: 4px 6px;
  }
}

/* ==========================================================================
   LEARN PAGE — PRACTICE CTA BANNER
   ========================================================================== */
.learn-cta-box {
  margin: var(--space-8) 0 var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--accent-gradient);
  padding: var(--space-5) var(--space-6);
}

.learn-cta-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.learn-cta-inner > [data-lucide] {
  width: 28px;
  height: 28px;
  color: #fff;
  flex-shrink: 0;
}

.learn-cta-inner > div {
  flex: 1;
  min-width: 0;
}

.learn-cta-inner strong {
  display: block;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
}

.learn-cta-inner span {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
}

.learn-cta-inner .btn {
  flex-shrink: 0;
  background: #fff;
  color: var(--accent-primary);
  border: none;
}

.learn-cta-inner .btn:hover {
  background: rgba(255, 255, 255, 0.9);
}