/* Enhanced UI Styles - Reusable Classes */

/* Modern Card Styles - Slicker Version */
.modern-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: white;
  transition: all 0.2s ease;
  overflow: hidden;
}

.modern-card:active {
  transform: scale(0.98);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Minimal Header */
.gradient-header {
  background: white;
  color: #2F4F4F;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
}

.gradient-header h1 {
  color: #2F4F4F;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.gradient-header p {
  color: #666;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
}

/* Stats Grid - Compact */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.stat-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.stat-card:active {
  transform: scale(0.96);
  background: #f1f3f5;
}

.stat-number {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  color: #2F4F4F;
}

.stat-label {
  font-size: 10px;
  color: #666;
  margin: 6px 0 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Action Cards - Minimal */
a.link.no-ripple {
  display: block;
  width: 100%;
}

.action-card {
  background: white;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--ezytz-sky-blue);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.action-card:hover {
  box-shadow: 0 0 8px rgba(0, 174, 255, 0.265);
}

.action-card:active {
  transform: scale(0.98);
  background: #f8f9fa;
}

.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.action-icon i {
  font-size: 22px;
}

.action-content {
  flex: 1;
}

.action-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  color: #2F4F4F;
}

.action-subtitle {
  font-size: 12px;
  color: #666;
  margin: 0;
  font-weight: 400;
}

/* Activity Timeline - Compact */
.activity-item {
  background: white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon i {
  font-size: 18px;
}

.activity-text {
  font-size: 13px;
  color: #2F4F4F;
  margin: 0 0 3px;
  font-weight: 400;
}

.activity-time {
  font-size: 11px;
  color: #999;
  margin: 0;
}

.activity-link {
  color: var(--ezytz-blue);
  font-weight: 500;
}

/* Profile Card - Minimal */
.profile-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  color: #2F4F4F;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  border: 2px solid rgba(0, 0, 0, 0.06);
}

.profile-avatar i {
  font-size: 28px;
  color: #666;
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  text-align: center;
  color: #2F4F4F;
}

.profile-email {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin: 0;
}

/* Credits Card - Gold Accent */
.credits-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(245, 158, 11, 0.08));
  border-radius: 12px;
  padding: 20px;
  color: #2F4F4F;
  border: 1px solid rgba(255, 215, 0, 0.2);
  margin-bottom: 12px;
}

.credits-label {
  font-size: 12px;
  color: #666;
  margin: 0 0 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.credits-amount {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  color: var(--ezytz-gold);
}

/* Document Item - Sleek */
.doc-item-enhanced {
  background: white;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.2s;
}

.doc-item-enhanced:active {
  transform: scale(0.98);
  background: #f8f9fa;
}

.doc-icon-enhanced {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-icon-enhanced i {
  font-size: 22px;
}

.doc-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #2F4F4F;
}

.doc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.doc-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: white;
}

/* Section Headers - Subtle */
.section-header {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 12px;
  color: #2F4F4F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
  color: #666;
}

/* Color Variants - Muted with Gold Priority */
.bg-green { background: rgba(60, 179, 113, 0.12); color: var(--ezytz-green); }
.bg-blue { background: rgba(30, 144, 255, 0.12); color: var(--ezytz-blue); }
.bg-purple { background: rgba(151, 28, 252, 0.12); color: var(--ezytz-purple); }
.bg-yellow { background: rgba(255, 215, 0, 0.15); color: #d4a500; }
.bg-gold { background: rgba(255, 215, 0, 0.15); color: #d4a500; }
.bg-red { background: rgba(220, 53, 69, 0.12); color: var(--ezytz-red); }
.bg-orange { background: rgba(245, 158, 11, 0.12); color: var(--ezytz-orange); }
.bg-brown { background: rgba(160, 82, 45, 0.12); color: var(--ezytz-brown); }
.bg-sky { background: rgba(135, 206, 235, 0.12); color: var(--ezytz-sky-blue); }

.bg-green-light { background: rgba(60, 179, 113, 0.08); color: var(--ezytz-green); }
.bg-blue-light { background: rgba(30, 144, 255, 0.08); color: var(--ezytz-blue); }
.bg-purple-light { background: rgba(151, 28, 252, 0.08); color: var(--ezytz-purple); }
.bg-yellow-light { background: rgba(255, 215, 0, 0.1); color: #d4a500; }
.bg-gold-light { background: rgba(255, 215, 0, 0.1); color: #d4a500; }
.bg-orange-light { background: rgba(245, 158, 11, 0.08); color: var(--ezytz-orange); }
.bg-red-light { background: rgba(220, 53, 69, 0.08); color: var(--ezytz-red); }
.bg-brown-light { background: rgba(160, 82, 45, 0.08); color: var(--ezytz-brown); }
.bg-sky-light { background: rgba(135, 206, 235, 0.08); color: var(--ezytz-sky-blue); }

/* Floating Action Button - Gold Accent */
@keyframes fab-ping {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3), 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3), 0 0 0 10px rgba(255, 215, 0, 0);
  }
}

.fab-enhanced a,
.fab-enhanced .fab-buttons a {
  background: var(--ezytz-gold) !important;
  color: #2F4F4F !important;
  animation: fab-ping 2s ease-in-out infinite !important;
}

.fab-enhanced a i,
.fab-enhanced .fab-buttons a i {
  color: #2F4F4F !important;
}

/* Page Background - Clean */
.page-bg-gradient {
  background: #fafbfc;
}

/* List Item - Clean */
.list-item-enhanced {
  border-radius: 10px;
  margin: 0 16px 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Button Standard - Common Class */
.button-standard {
  border-radius: 10px !important;
  color: white !important;
}

/* Chip - Minimal with Gold Variant */
.chip-enhanced {
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.chip-enhanced:active {
  transform: scale(0.96);
}

.chip-gold {
  background: rgba(255, 215, 0, 0.12);
  color: #d4a500;
  border-color: rgba(255, 215, 0, 0.3);
}

.chip-blue {
  background: rgba(30, 144, 255, 0.12);
  color: var(--ezytz-blue);
  border-color: rgba(30, 144, 255, 0.3);
}

/* ===== DARK MODE (Opt-in with .dark-mode class on body or parent) ===== */
.dark-mode .modern-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .modern-card:active {
  border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .gradient-header {
  background: #1a1a1a;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .gradient-header h1 {
  color: #ffffff;
}

.dark-mode .gradient-header p {
  color: #999;
}

.dark-mode .stat-card {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .stat-card:active {
  background: #333;
}

.dark-mode .stat-number {
  color: #ffffff;
}

.dark-mode .stat-label {
  color: #999;
}

.dark-mode .action-card {
  background: #1a1a1a;
  border-color: var(--secondary-color);
}

.dark-mode .action-card:hover {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.dark-mode .action-card:active {
  background: #2a2a2a;
}

.dark-mode .action-title {
  color: #ffffff;
}

.dark-mode .action-subtitle {
  color: #999;
}

.dark-mode .activity-item {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .activity-text {
  color: #e0e0e0;
}

.dark-mode .activity-time {
  color: #666;
}

.dark-mode .profile-card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .profile-avatar {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .profile-avatar i {
  color: #999;
}

.dark-mode .profile-name {
  color: #ffffff;
}

.dark-mode .profile-email {
  color: #999;
}

.dark-mode .credits-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(245, 158, 11, 0.15));
  border-color: rgba(255, 215, 0, 0.3);
}

.dark-mode .credits-label {
  color: #999;
}

.dark-mode .credits-amount {
  color: var(--ezytz-gold);
}

.dark-mode .doc-item-enhanced {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .doc-item-enhanced:active {
  background: #2a2a2a;
}

.dark-mode .doc-title {
  color: #ffffff;
}

.dark-mode .section-header {
  color: #999;
}

.dark-mode .bg-green { background: rgba(60, 179, 113, 0.2); }
.dark-mode .bg-blue { background: rgba(30, 144, 255, 0.2); }
.dark-mode .bg-purple { background: rgba(151, 28, 252, 0.2); }
.dark-mode .bg-yellow { background: rgba(255, 215, 0, 0.2); }
.dark-mode .bg-gold { background: rgba(255, 215, 0, 0.2); }
.dark-mode .bg-red { background: rgba(220, 53, 69, 0.2); }
.dark-mode .bg-orange { background: rgba(245, 158, 11, 0.2); }
.dark-mode .bg-brown { background: rgba(160, 82, 45, 0.2); }
.dark-mode .bg-sky { background: rgba(135, 206, 235, 0.2); }

.dark-mode .bg-green-light { background: rgba(60, 179, 113, 0.15); }
.dark-mode .bg-blue-light { background: rgba(30, 144, 255, 0.15); }
.dark-mode .bg-purple-light { background: rgba(151, 28, 252, 0.15); }
.dark-mode .bg-yellow-light { background: rgba(255, 215, 0, 0.15); }
.dark-mode .bg-gold-light { background: rgba(255, 215, 0, 0.15); }
.dark-mode .bg-orange-light { background: rgba(245, 158, 11, 0.15); }
.dark-mode .bg-red-light { background: rgba(220, 53, 69, 0.15); }
.dark-mode .bg-brown-light { background: rgba(160, 82, 45, 0.15); }
.dark-mode .bg-sky-light { background: rgba(135, 206, 235, 0.15); }

.dark-mode .page-bg-gradient {
  background: #0a0a0a;
}

.dark-mode .list-item-enhanced {
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .chip-enhanced {
  border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .chip-gold {
  background: rgba(255, 215, 0, 0.2);
  color: var(--ezytz-gold);
  border-color: rgba(255, 215, 0, 0.4);
}

.dark-mode .chip-blue {
  background: rgba(30, 144, 255, 0.2);
  color: #5ba3ff;
  border-color: rgba(30, 144, 255, 0.4);
}


/* ===== SAVED SUMMARIES PAGE ===== */
.saved-summaries .accordion-item,
.latest-summaries .accordion-item,
.default-summaries .accordion-item {
  background: white;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.saved-summaries .item-link,
.latest-summaries .item-link,
.default-summaries .item-link {
  background: white;
  padding: 16px;
}

.saved-summaries .item-title,
.latest-summaries .item-title,
.default-summaries .item-title {
  font-size: 15px;
  font-weight: 600;
  color: #2F4F4F;
}

.saved-summaries .item-subtitle,
.latest-summaries .item-subtitle,
.default-summaries .item-subtitle {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

.saved-summaries .item-after,
.latest-summaries .item-after,
.default-summaries .item-after {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.saved-summaries .accordion-item-content .block,
.latest-summaries .accordion-item-content .block,
.default-summaries .accordion-item-content .block {
  background: #f8f9fa;
  padding: 16px;
}

.saved-summaries .accordion-item-content h3,
.latest-summaries .accordion-item-content h3,
.default-summaries .accordion-item-content h3 {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.saved-summaries .accordion-item-content p,
.latest-summaries .accordion-item-content p,
.default-summaries .accordion-item-content p {
  font-size: 14px;
  color: #2F4F4F;
  line-height: 1.6;
  margin-bottom: 16px;
}

.saved-summaries .accordion-item-content ul,
.latest-summaries .accordion-item-content ul,
.default-summaries .accordion-item-content ul {
  font-size: 14px;
  color: #2F4F4F;
  line-height: 1.6;
  padding-left: 20px;
}

.saved-summaries .accordion-item-content ul li,
.latest-summaries .accordion-item-content ul li,
.default-summaries .accordion-item-content ul li {
  margin-bottom: 8px;
}

.saved-summaries .progressbar,
.latest-summaries .progressbar,
.default-summaries .progressbar {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
}

.saved-summaries .progressbar span,
.latest-summaries .progressbar span,
.default-summaries .progressbar span {
  border-radius: 4px;
}

/* ===== SHEET MODALS ===== */
.sheet-modal {
  border-radius: 16px 16px 0 0 !important;
}

.sheet-modal .toolbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.sheet-modal .toolbar .link {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.sheet-modal h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #2F4F4F !important;
  margin: 16px 0 8px !important;
}

.sheet-modal p {
  font-size: 14px !important;
  color: #666 !important;
  line-height: 1.5 !important;
}

.sheet-modal .list {
  margin: 16px 0 !important;
}

.sheet-modal .list ul {
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.sheet-modal .list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.sheet-modal .list li:last-child {
  border-bottom: none !important;
}

.sheet-modal .item-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2F4F4F !important;
}

.sheet-modal .button {
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
}

.sheet-modal .button-fill {
  box-shadow: none !important;
}

.sheet-modal .button-outline {
  border-width: 1px !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.sheet-modal .block {
  padding: 16px !important;
}

.sheet-modal .text-align-center {
  text-align: center !important;
}

.sheet-modal .f7-icons {
  margin-bottom: 12px !important;
}