ؤ/* =============================================
   مكتبنا - mktbna.com
   Modern Style - Teal Theme
   ============================================= */

/* =============================================
   WHATSAPP-STYLE MESSAGES
   ============================================= */

/* Chat Container */
#messagesContainer {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230d9488' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 16px !important;
    scroll-behavior: smooth;
}

/* Message Bubble Base */
#messagesContainer .flex > div {
    position: relative;
    max-width: 72%;
    border-radius: 18px;
    padding: 10px 14px 24px;
    margin-bottom: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.15s;
    word-break: break-word;
}

/* Sent Messages (user = right side in RTL = justify-start) */
#messagesContainer .justify-start > div {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    border: none !important;
    border-bottom-right-radius: 4px !important;
    color: white !important;
}
#messagesContainer .justify-start > div::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid #0f766e;
    border-bottom: 8px solid transparent;
}

/* Received Messages (admin = left side in RTL = justify-end) */
#messagesContainer .justify-end > div {
    background: rgba(15, 25, 42, 0.9) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom-left-radius: 4px !important;
}
#messagesContainer .justify-end > div::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-right: 8px solid rgba(15,25,42,0.9);
    border-bottom: 8px solid transparent;
}

/* Message Time */
#messagesContainer .flex > div .text-sm {
    position: absolute;
    bottom: 6px;
    left: 10px;
    font-size: 10px !important;
    opacity: 0.65;
}
#messagesContainer .justify-start > div .text-sm {
    color: rgba(255,255,255,0.8) !important;
}

/* Message Text */
#messagesContainer .flex > div p {
    color: white !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* WhatsApp-style date divider */
.chat-date-divider {
    text-align: center;
    margin: 16px 0;
    position: relative;
}
.chat-date-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.06);
}
.chat-date-divider span {
    background: rgba(13,148,136,0.15);
    color: #2dd4bf;
    font-size: 11px;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid rgba(13,148,136,0.2);
    position: relative;
    z-index: 1;
}

/* Chat Input Area */
#messagesContainer ~ * form {
    background: rgba(8,20,38,0.9) !important;
    backdrop-filter: blur(20px);
}

/* Send Button WhatsApp-style */
#messagesContainer ~ * form button[type="submit"] {
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Message Animation */
@keyframes msgSlideIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#messagesContainer .flex {
    animation: msgSlideIn 0.25s ease-out;
}

/* =============================================
   ADMIN PANEL GENERAL
   ============================================= */

/* Cards in admin */
.card-elegant {
    background: rgba(10,22,40,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    transition: all 0.3s;
}
.card-elegant:hover {
    border-color: rgba(13,148,136,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.hover-lift {
    transition: transform 0.3s, box-shadow 0.3s;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.status-pending    { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.status-processing { background:rgba(59,130,246,0.15); color:#60a5fa; border:1px solid rgba(59,130,246,0.3); }
.status-completed,
.status-paid       { background:rgba(16,185,129,0.15); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.status-cancelled  { background:rgba(239,68,68,0.15);  color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.status-approved   { background:rgba(13,148,136,0.15); color:#2dd4bf; border:1px solid rgba(13,148,136,0.3); }
.status-rejected   { background:rgba(239,68,68,0.15);  color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.status-waiting    { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.status-done       { background:rgba(16,185,129,0.15); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.status-no_response{ background:rgba(100,116,139,0.15);color:#94a3b8; border:1px solid rgba(100,116,139,0.3); }

/* Online Indicator */
.online-indicator {
    width: 9px;
    height: 9px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-green 2s infinite;
    box-shadow: 0 0 6px #10b981;
}
@keyframes pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* =============================================
   ANIMATIONS
   ============================================= */
.fade-in {
    animation: fadeIn 0.35s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   PRINT
   ============================================= */
@media print {
    nav, footer, .no-print, aside { display: none !important; }
    body { background: white !important; color: black !important; }
    .card-elegant { box-shadow: none; border: 1px solid #ddd; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    #messagesContainer .flex > div { max-width: 88%; }
    .card-elegant { border-radius: 12px; }
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13,148,136,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(13,148,136,0.6); }

/* =============================================
   RESPONSIVE - PUBLIC SITE
   ============================================= */

/* Prevent iOS input zoom (font-size must be >= 16px) */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Container padding on small screens */
@media (max-width: 640px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    
    /* Stack grid columns */
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3,
    .grid.lg\:grid-cols-2,
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Smaller headings */
    h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem !important; }
    
    /* Full-width buttons */
    .flex.flex-wrap.gap-4 > a,
    .flex.flex-wrap.gap-4 > button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Messages: full width chat */
    #messagesContainer .flex > div {
        max-width: 88% !important;
    }

    /* Section padding */
    section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* =============================================
   TOUCH IMPROVEMENTS - PUBLIC
   ============================================= */
a, button {
    -webkit-tap-highlight-color: rgba(13,148,136,0.15);
    touch-action: manipulation; /* Prevent double-tap zoom */
}

/* Minimum touch target size 44x44px - PUBLIC SITE ONLY */
.public-nav a,
.glass-panel a {
    min-height: 44px;
}

/* =============================================
   iOS / SAFARI FIXES
   ============================================= */
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Fix backdrop-filter on iOS */
.glass-panel {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

/* Fix position: sticky on iOS */
nav.fixed {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* =============================================
   TABLET (768px - 1023px)
   ============================================= */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid.lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid.lg\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* Messages: 2-col layout stays */
    .grid.lg\:grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* =============================================
   PRINT
   ============================================= */
@media print {
    nav, footer, .no-print, aside,
    #mobile-menu, .blob { display: none !important; }
    body { background: white !important; color: black !important; font-size: 12pt; }
    .glass-panel { background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; }
    a { color: black !important; text-decoration: none !important; }
    .container { max-width: 100% !important; padding: 0 !important; }
}

/* =============================================
   DARK MODE SAFE COLORS
   ============================================= */
/* Ensure text is always readable */
.text-white { color: white; }
.dark .text-gray-400 { color: #9ca3af; }
.dark .text-gray-300 { color: #d1d5db; }

/* =============================================
   BETTER FOCUS STYLES (Accessibility)
   ============================================= */
:focus-visible {
    outline: 2px solid #0d9488 !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid #0d9488 !important;
    outline-offset: 3px !important;
}

/* =============================================
   HORIZONTAL SCROLL PREVENTION
   ============================================= */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* =============================================
   🆕 NEW DESIGN - 100% DIFFERENT
   Clean Navy + Teal - Professional SaaS Style
   ============================================= */

/* ── Body & Background ── */
html.dark body,
.dark body {
    background-color: #0a1628 !important;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(13,148,136,0.08) 1px, transparent 0) !important;
    background-size: 32px 32px !important;
    color: #e2e8f0 !important;
}

/* ── Hide Blobs ── */
.blob { display: none !important; }
.fixed.inset-0.overflow-hidden.pointer-events-none { display: none !important; }

/* ── Navbar - Solid ── */
nav.fixed {
    background: rgba(10, 22, 40, 0.98) !important;
    backdrop-filter: blur(0) !important;
    -webkit-backdrop-filter: blur(0) !important;
    border-bottom: 1px solid rgba(13,148,136,0.25) !important;
    box-shadow: 0 1px 0 rgba(13,148,136,0.1), 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Logo glow */
nav.fixed a .bg-primary {
    box-shadow: 0 0 0 2px rgba(13,148,136,0.2) !important;
}

/* ── Glass Panels → Solid Cards ── */
.dark .glass-panel {
    background: rgba(13, 25, 48, 0.95) !important;
    backdrop-filter: blur(0) !important;
    -webkit-backdrop-filter: blur(0) !important;
    border: 1px solid rgba(13, 148, 136, 0.15) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}
.dark .glass-panel:hover {
    border-color: rgba(13,148,136,0.3) !important;
}

/* ── Sections Background ── */
section {
    position: relative;
    z-index: 1;
}

/* ── Cards Hover Effect ── */
.dark .glass-panel:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* ── Hero Section - New Style ── */
.min-h-\[90vh\] {
    background: linear-gradient(160deg, #0a1628 0%, #0d2040 50%, #091522 100%) !important;
    border-bottom: 1px solid rgba(13,148,136,0.1);
}

/* Geometric decoration for hero instead of blobs */
.min-h-\[90vh\]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(135deg, rgba(13,148,136,0.05) 0%, transparent 50%),
        linear-gradient(225deg, rgba(45,212,191,0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.min-h-\[90vh\] > * { position: relative; z-index: 1; }

/* ── Typography ── */
html.dark h1, html.dark h2, html.dark h3 { color: #f1f5f9 !important; }
html.dark p, html.dark .text-gray-400 { color: #94a3b8 !important; }

/* ── Buttons - Flat Modern Style ── */
.bg-primary {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    border: none !important;
    letter-spacing: 0.01em;
}
.bg-primary:hover {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(13,148,136,0.4) !important;
}

/* Primary text links */
.text-primary { color: #2dd4bf !important; }

/* ── Accent Line ── */
.w-10.h-\[3px\].bg-primary {
    background: linear-gradient(90deg, #0d9488, #2dd4bf) !important;
    height: 3px;
    border-radius: 2px;
}

/* ── Input Fields - Dark Navy ── */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
    background: rgba(10,22,40,0.8) !important;
    border: 1px solid rgba(13,148,136,0.2) !important;
    color: #e2e8f0 !important;
    border-radius: 10px !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 3px rgba(13,148,136,0.15) !important;
    outline: none !important;
}

/* ── Stats/Trust Section ── */
.py-8 .glass-panel,
.py-16 .glass-panel {
    background: rgba(10, 22, 40, 0.9) !important;
    border: 1px solid rgba(13,148,136,0.12) !important;
}

/* ── Scrollbar - Navy Theme ── */
::-webkit-scrollbar-track { background: #0a1628 !important; }
::-webkit-scrollbar-thumb { background: rgba(13,148,136,0.25) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(13,148,136,0.5) !important; }

/* ── Page Header Accent ── */
.inline-flex.glass-panel.rounded-full {
    background: rgba(13,148,136,0.1) !important;
    border: 1px solid rgba(13,148,136,0.2) !important;
}

/* ── Mobile Menu ── */
#mobile-menu .glass-panel {
    background: #0a1628 !important;
    border-right: 1px solid rgba(13,148,136,0.2) !important;
}

/* ── Notification Dropdown ── */
.group:hover .glass-panel,
.group:focus-within .glass-panel {
    background: #0d1e38 !important;
    border: 1px solid rgba(13,148,136,0.2) !important;
}

/* ── Footer Override ── */
footer {
    background: #060f1a !important;
    border-top: 1px solid rgba(13,148,136,0.15) !important;
}

/* ── CTA Section ── */
.rounded-3xl.glass-panel {
    background: linear-gradient(135deg, rgba(13,148,136,0.08), rgba(10,22,40,0.95)) !important;
    border: 1px solid rgba(13,148,136,0.2) !important;
}

/* ── Active Nav Link Indicator ── */
nav.fixed a:hover {
    background: rgba(13,148,136,0.08) !important;
    color: #2dd4bf !important;
}

/* ── Trust bar ── */
.flex.items-center.gap-3.text-gray-400 .material-symbols-outlined {
    color: #0d9488;
}

/* ── Neon Shadow Override ── */
.shadow-neon {
    box-shadow: 0 0 12px rgba(13,148,136,0.3), 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ── Remove all old purple/colored blobs via bg overrides ── */
.bg-purple-900\/30 { display: none !important; }
.bg-accent\/10 { background: rgba(13,148,136,0.05) !important; }
.bg-primary\/20.rounded-full.blur-\[120px\] { display: none !important; }