/* MyDealLoan Master Stylesheet */

/* Tailwind Configuration */
/* This configuration should be applied via tailwind.config script in HTML */

/* ========================================
   CSS VARIABLES - Brand Colors
   ======================================== */
:root {
  --brand-navy: #0B1C3E;
  --brand-gold: #C5A059;
  --brand-gold-light: #e5c567;
  --brand-gold-hover: #d4af4d;
  --brand-dark: #333333;
  --gray-light: #f5f5f5;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ========================================
   TEXT UTILITIES
   ======================================== */

/* Text Shadow for better contrast on images */
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ========================================
   CARD EFFECTS
   ======================================== */

/* Glassmorphism card effect */
.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Card shadow effect */
.shadow-card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Custom input styling */
.custom-input {
  padding: 0.75rem 1rem;
  border: 2px solid var(--brand-gold);
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}

.custom-input:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px rgba(11, 28, 62, 0.1);
}

/* Enhanced Select Dropdown Styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230B1C3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 8px;
  padding-right: 3rem !important;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand-navy);
  cursor: pointer;
}

select:hover {
  border-color: var(--brand-gold);
  background-color: #fafafa;
}

select:focus {
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px rgba(11, 28, 62, 0.1);
  background-color: white;
}

/* Style for placeholder option */
select option[value=""] {
  color: #9ca3af;
  font-style: italic;
}

/* Style for dropdown options */
select option {
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand-navy);
  background-color: white;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: var(--brand-gold);
  color: white;
}

/* ========================================
   TABLE STYLES
   ======================================== */

/* Loan table styling */
.loan-table {
  border-collapse: collapse;
}

.loan-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.loan-table tbody tr:last-child {
  border-bottom: none;
}

.loan-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

/* ========================================
   BACKGROUND PATTERNS & DECORATIONS
   ======================================== */

/* Geometric background pattern for login/signup pages */
.geometric-bg {
  background-color: #f3f4f6;
  background-image:
    linear-gradient(30deg, rgba(197, 160, 89, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(197, 160, 89, 0.05) 87.5%, rgba(197, 160, 89, 0.05)),
    linear-gradient(150deg, rgba(197, 160, 89, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(197, 160, 89, 0.05) 87.5%, rgba(197, 160, 89, 0.05)),
    linear-gradient(30deg, rgba(197, 160, 89, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(197, 160, 89, 0.05) 87.5%, rgba(197, 160, 89, 0.05)),
    linear-gradient(150deg, rgba(197, 160, 89, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(197, 160, 89, 0.05) 87.5%, rgba(197, 160, 89, 0.05)),
    linear-gradient(60deg, rgba(11, 28, 62, 0.03) 25%, transparent 25.5%, transparent 75%, rgba(11, 28, 62, 0.03) 75%, rgba(11, 28, 62, 0.03)),
    linear-gradient(60deg, rgba(11, 28, 62, 0.03) 25%, transparent 25.5%, transparent 75%, rgba(11, 28, 62, 0.03) 75%, rgba(11, 28, 62, 0.03));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* Hero background for dashboard */
.hero-bg {
  background: linear-gradient(135deg, var(--brand-navy) 0%, #1a2f5a 100%);
  position: relative;
}

/* Confetti overlay effect */
.confetti-overlay {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(197, 160, 89, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(197, 160, 89, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(229, 197, 103, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(197, 160, 89, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Hero pattern for about page */
.hero-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(197, 160, 89, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(197, 160, 89, 0.06) 0%, transparent 50%);
  animation: subtle-pulse 20s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Decorative lines */
.deco-line {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(197, 160, 89, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.deco-left {
  left: -100px;
  top: 50%;
  transform: translateY(-50%);
}

.deco-right {
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
}

/* Squiggle underline decoration */
.squiggle-underline {
  display: block;
  width: 100px;
  height: 8px;
  margin: 1rem auto 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='8' viewBox='0 0 100 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 Q 5 0, 10 4 T 20 4 T 30 4 T 40 4 T 50 4 T 60 4 T 70 4 T 80 4 T 90 4 T 100 4' stroke='%23C5A059' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ========================================
   UTILITY CLASSES FOR COLOR CONSISTENCY
   ======================================== */

/* Background colors */
.bg-primary {
  background-color: var(--brand-navy);
}

.bg-accent {
  background-color: var(--brand-gold);
}

.bg-page {
  background-color: #f9fafb;
}

.bg-brand-light {
  background-color: var(--gray-light);
}

.bg-brand-goldHover {
  background-color: var(--brand-gold-hover);
}

.bg-mdl-blue {
  background-color: var(--brand-navy);
}

.bg-mdl-gold {
  background-color: var(--brand-gold);
}

.bg-mdl-gray-light {
  background-color: var(--gray-light);
}

/* Text colors */
.text-primary {
  color: var(--brand-navy);
}

.text-accent {
  color: var(--brand-gold);
}

.text-brand-text {
  color: var(--brand-dark);
}

.text-mdl-text-dark {
  color: var(--brand-dark);
}

.text-mdl-text-light {
  color: #6b7280;
}

.text-mdl-blue {
  color: var(--brand-navy);
}

.text-mdl-gold {
  color: var(--brand-gold);
}

.text-mdl-dark-blue {
  color: var(--brand-navy);
}

.text-brand-blue {
  color: var(--brand-navy);
}

/* Border colors */
.border-accent {
  border-color: var(--brand-gold);
}

/* ========================================
   CONTAINER UTILITIES
   ======================================== */

.max-w-container {
  max-width: 1200px;
}

/* ========================================
   MODAL STYLES - Mobile Safari Support
   ======================================== */

/* Modal container - fixed positioning with proper mobile support */
.modal-container {
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Ensure scrolling content is visible */
.modal-container.hidden {
  display: none !important;
}

.modal-container.flex {
  display: flex !important;
}