/* ==========================================
   G.D. SINAI - INSURANCE AGENCY SYSTEM
   style.css — Production Ready
   ========================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary: #E6512B;
    --secondary: #ffb957;
    --tertiary: #499ab8;
    --error: #ef4444;
    --bg: #FDFBF7;
    --glass-bg: rgba(255,255,255,0.7);
    --glass-border: rgba(0,0,0,0.06);
    --nav-bg: rgba(253,251,247,0.95);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
    --radius: 1.5rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Heebo', sans-serif;
    background: var(--bg);
    color: #1e293b;
    min-height: 100vh;
    overflow-x: hidden;
    direction: rtl;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Glass Components ── */
.glass-nav {
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--glass-border);
}

.glass-pane {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

.glass-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-sm);
}

/* ── Luminous Background Blobs ── */
.luminous-blob {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230,81,43,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: blobFloat 12s ease-in-out infinite alternate;
}

@keyframes blobFloat {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -30px) scale(1.05); }
}

/* ── Navigation ── */
.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    border-radius: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    color: #64748b;
    text-decoration: none;
    user-select: none;
}

.nav-item:hover {
    background: rgba(0,0,0,0.04);
    color: #0f172a;
}

.nav-item-active {
    background: rgba(230,81,43,0.1) !important;
    color: #E6512B !important;
    font-weight: 700;
}

.nav-item-active .material-symbols-outlined {
    color: #E6512B !important;
}

/* ── Screens ── */
.screen {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.screen.active {
    opacity: 1;
    transform: translateY(0);
}

.screen.hidden {
    display: none !important;
}

/* ── Modal Overlay ── */
.modal-overlay {
    transition: opacity 0.25s ease;
}

.modal-overlay:not(.opacity-0) {
    opacity: 1 !important;
}

.modal {
    position: relative;
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Audio Wave Loader ── */
.audio-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 48px;
}

.audio-wave span {
    display: block;
    width: 5px;
    background: var(--secondary);
    border-radius: 3px;
    animation: wave 1.1s ease-in-out infinite;
}

.audio-wave span:nth-child(1) { animation-delay: 0.0s; height: 20px; }
.audio-wave span:nth-child(2) { animation-delay: 0.1s; height: 30px; }
.audio-wave span:nth-child(3) { animation-delay: 0.2s; height: 48px; }
.audio-wave span:nth-child(4) { animation-delay: 0.3s; height: 30px; }
.audio-wave span:nth-child(5) { animation-delay: 0.4s; height: 20px; }

@keyframes wave {
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50%       { transform: scaleY(1);   opacity: 1; }
}

/* ── Company Cards ── */
.company-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.company-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Toast ── */
#toastContainer > div {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: auto;
}

/* ── Calendar Day Cells ── */
#calendarGrid > div {
    transition: all 0.15s ease;
}
#calendarGrid > div:hover {
    transform: scale(1.04);
}

/* ── Task Cards ── */
#mainTasksList > div,
#dashTasksList > div {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#mainTasksList > div:hover {
    transform: translateX(-3px);
    box-shadow: var(--shadow-md);
}

/* ── Bento Stats ── */
.stat-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Transcript Bubbles ── */
#transcriptContainer > div {
    animation: fadeSlideIn 0.3s ease both;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── QA Checklist Items ── */
#qaChecklistResults > div {
    transition: transform 0.15s ease;
}
#qaChecklistResults > div:hover {
    transform: translateX(-2px);
}

/* ── Announcement Hero ── */
#annHeroContainer > div {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#annHeroContainer > div:hover {
    box-shadow: var(--shadow-lg);
}

/* ── Buttons ── */
button {
    cursor: pointer;
    transition: all 0.2s ease;
}

button:active {
    transform: scale(0.97);
}

/* ── Inputs ── */
input, select, textarea {
    font-family: 'Heebo', sans-serif;
    direction: rtl;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(230,81,43,0.4) !important;
    box-shadow: 0 0 0 3px rgba(230,81,43,0.08);
}

/* ── Flatpickr RTL Fix ── */
.flatpickr-calendar {
    direction: ltr;
    font-family: 'Heebo', sans-serif;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,0.08);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* ── Responsive Mobile Nav ── */
@media (max-width: 1024px) {
    main {
        padding-bottom: 5rem;
    }
}

/* ── Line Clamp Utility ── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ── Print Styles ── */
@media print {
    .glass-nav, header, #toastContainer, .luminous-blob { display: none !important; }
    main { margin: 0 !important; padding: 1rem !important; }
    .screen { display: block !important; opacity: 1 !important; }
    .screen:not(.active) { display: none !important; }
}