/* ═══════════════════════════════════════════════════════════
   Lammah Studio - Main Styles (Extracted from index.html)
   ═══════════════════════════════════════════════════════════ */

/* --- EDITOR PAPER STYLES --- */
.editor-paper {
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    margin: 2rem auto !important;
    padding: 0 !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 12pt;
    line-height: 1.1;
    position: relative;
    z-index: 10;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Paper (Default) - Glassy/Frosted */
.editor-paper:not(.light-theme) {
    background-color: rgba(20, 20, 30, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #e0e0e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Script elements in dark mode */
.editor-paper:not(.light-theme) .scene-heading,
.editor-paper:not(.light-theme) [class*="scene-heading"] { 
    color: #a3e635 !important;
    font-weight: bold;
    text-transform: uppercase;
}
.editor-paper:not(.light-theme) .character,
.editor-paper:not(.light-theme) [class*="character"] { 
    color: #38bdf8 !important;
    font-weight: bold;
}
.editor-paper:not(.light-theme) .parenthetical,
.editor-paper:not(.light-theme) [class*="parenthetical"] { 
    color: #fbbf24 !important;
    font-style: italic;
}
.editor-paper:not(.light-theme) .dialogue,
.editor-paper:not(.light-theme) [class*="dialogue"] { 
    color: #f3f4f6 !important;
}
.editor-paper:not(.light-theme) .action,
.editor-paper:not(.light-theme) [class*="action"] { 
    color: #d1d5db !important;
}
.editor-paper:not(.light-theme) .transition,
.editor-paper:not(.light-theme) [class*="transition"] { 
    color: #f472b6 !important;
    text-transform: uppercase;
}

/* Light Mode Paper */
.editor-paper.light-theme {
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

.editor-paper.light-theme .scene-heading,
.editor-paper.light-theme .character,
.editor-paper.light-theme .dialogue,
.editor-paper.light-theme .action,
.editor-paper.light-theme .parenthetical,
.editor-paper.light-theme .transition,
.editor-paper.light-theme [class*="scene-heading"],
.editor-paper.light-theme [class*="character"],
.editor-paper.light-theme [class*="dialogue"],
.editor-paper.light-theme [class*="action"],
.editor-paper.light-theme [class*="parenthetical"],
.editor-paper.light-theme [class*="transition"] {
    color: #000000 !important;
}

.editor-paper [data-slate-editor="true"] {
    padding: 25mm 25mm 25mm 35mm;
    min-height: 500px;
}

/* --- COVER PAGE STYLES --- */
.script-cover-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    page-break-after: always;
    overflow: hidden;
    background-color: #000;
    margin: 0 auto 2rem auto;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.script-cover-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--poster-image-url);
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    z-index: 0;
}

.script-cover-page::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
    z-index: 1;
}

.script-cover-page-content {
    position: relative;
    z-index: 2;
    width: 80%;
    padding: 2rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.script-cover-page h1 {
    font-family: 'Courier Prime', monospace;
    font-size: 3.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2rem;
    color: #fff;
    letter-spacing: 4px;
    line-height: 1.2;
}

.script-cover-page p {
    font-family: 'Courier Prime', monospace;
    font-size: 1.4rem;
    color: #eee;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Script Element Styles */
.scene-heading { font-weight: bold; text-transform: uppercase; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.action { margin-bottom: 1rem; }
.character { margin-top: 1rem; width: 60%; margin-left: auto; margin-right: auto; text-align: center; font-weight: bold; text-transform: uppercase; }
.parenthetical { width: 40%; margin-left: auto; margin-right: auto; text-align: center; font-size: 0.9em; }
.dialogue { width: 70%; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 1rem; }
.transition { text-align: right; text-transform: uppercase; margin-top: 1.5rem; margin-bottom: 1rem; font-weight: bold; }

/* RTL Icon Flipping */
html[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

.grecaptcha-badge { visibility: hidden; }

/* GLASSMORPHISM UTILITIES */
.glass-panel, 
.holographic-card, 
.futuristic-card, 
.futuristic-panel,
.sidebar-glass,
.header-glass {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 24px !important;
}

.project-list-container > div {
  border-radius: 24px !important;
}

.floating-glass-card {
    background: rgba(10, 15, 30, 0.6) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    border-radius: 24px;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.6);
}

/* Hover Effects */
.holographic-card:hover, .futuristic-card:hover, .floating-glass-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.6);
    box-shadow: 0 0 25px rgba(var(--accent-color-rgb), 0.2), inset 0 0 20px rgba(var(--accent-color-rgb), 0.05);
    transform: translateY(-3px);
}

/* Holographic Shine */
.holographic-card::before, .floating-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 70%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.holographic-card:hover::before, .floating-glass-card:hover::before {
  left: 150%;
}

/* Neon Text */
.neon-text {
    color: #fff;
    text-shadow:
        0 0 5px rgba(var(--accent-color-rgb), 0.8),
        0 0 10px rgba(var(--accent-color-rgb), 0.5),
        0 0 20px rgba(var(--accent-color-rgb), 0.3);
}

/* Cinematic Neon Breathing Animation */
@keyframes cinematic-neon-breath {
  0%, 100% {
      text-shadow: 
          0 0 10px #fff,
          0 0 20px #fff,
          0 0 30px var(--accent-color-main),
          0 0 40px var(--accent-color-main),
          0 0 70px var(--accent-color-main),
          0 0 80px var(--accent-color-main),
          0 0 100px var(--accent-color-main);
  }
  50% {
      text-shadow: 
          0 0 5px #fff,
          0 0 15px #fff,
          0 0 25px var(--accent-color-main),
          0 0 35px var(--accent-color-main),
          0 0 50px var(--accent-color-main);
  }
}

.cinematic-neon-title {
    animation: cinematic-neon-breath 4s ease-in-out infinite;
}

/* Modals Glass Effect */
.modal-glass-content {
    background: rgba(15, 20, 35, 0.9) !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
    border-radius: 32px;
}

/* Dashboard Layout */
.dashboard-layout-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    padding: 1rem;
    gap: 1rem;
}

.dashboard-main-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

/* Input Fields Glass */
.form-input, .futuristic-input, .futuristic-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    backdrop-filter: blur(10px);
    border-radius: 16px !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.form-input:focus, .futuristic-input:focus {
    border-color: var(--color-primary) !important;
    background: rgba(0, 0, 0, 0.6) !important;
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb), 0.25);
}

/* Buttons */
.console-button, .hero-cta-button {
    background: rgba(var(--accent-color-rgb), 0.15);
    border: 1px solid rgba(var(--accent-color-rgb), 0.4);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    border-radius: 16px !important;
}
.console-button:hover, .hero-cta-button:hover {
    background: rgba(var(--accent-color-rgb), 0.25);
    box-shadow: 0 0 20px rgba(var(--accent-color-rgb), 0.5);
    border-color: var(--color-primary);
}

/* Spinner */
.tech-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#0000 10%, var(--color-primary));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0);
  animation: tech-spinner-spin 1s infinite linear;
}
@keyframes tech-spinner-spin { to { transform: rotate(1turn); } }

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Custom Scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
    display: block;
}
.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
.overflow-y-auto:hover::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-color-rgb), 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .dashboard-layout-container {
        flex-direction: column;
        padding: 0.5rem;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    body {
        background-attachment: scroll;
    }
    
    .dashboard-layout-container {
        flex-direction: column;
        padding: 0.25rem;
        gap: 0.5rem;
    }
    
    .dashboard-main-area {
        padding: 0.5rem !important;
        margin: 0 !important;
    }
    
    .futuristic-card, 
    .glass-card,
    [class*="card"] {
        border-radius: 12px !important;
        padding: 1rem !important;
        margin: 0.25rem !important;
    }
    
    .cinematic-profile-page {
        padding: 0 !important;
    }
    
    .profile-header {
        padding: 8px 12px !important;
    }
    
    .profile-content {
        padding: 12px !important;
    }
    
    .content-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    input, textarea, select, button {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    .modal-content, 
    [class*="modal"] > div {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    
    .flex { flex-wrap: wrap !important; }
    .desktop-only, .hide-mobile { display: none !important; }
    .mobile-only { display: block !important; }
}

@media (max-width: 480px) {
    html { font-size: 13px; }
    
    .dashboard-main-area { padding: 0.25rem !important; }
    .futuristic-card, .glass-card { padding: 0.75rem !important; }
    button { padding: 10px 16px !important; }
    
    [class*="col-span-"] { grid-column: span 1 !important; }
    .lg\:col-span-2, .lg\:col-span-3 { grid-column: span 1 !important; }
}

/* Print Styles */
@media print {
    .no-print, aside, header, .floating-glass-card, .modal-overlay, .console-button, button, .ai-fab-button, .script-cover-page-bg {
        display: none !important;
    }
    body, html {
        background: white !important;
        color: black !important;
        background-image: none !important;
        overflow: visible !important;
        height: auto !important;
    }
    .dashboard-main-area {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    .editor-paper {
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        border: none !important;
        background-color: white !important;
        color: black !important;
    }
    .editor-paper:not(.light-theme) {
         background-color: white !important;
         color: black !important;
         border: none !important;
    }
    .editor-paper:not(.light-theme) [data-slate-node="element"], 
    .editor-paper:not(.light-theme) .character,
    .editor-paper:not(.light-theme) .dialogue,
    .editor-paper:not(.light-theme) .scene-heading {
        color: black !important;
        text-shadow: none !important;
    }
}