/* style.css — هوية بصرية عيادة الرقية والحجامة */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    /* --- Tokens (overridable per-clinic via settings.php) --- */
    --primary-dark: var(--user-primary-color, #0B4F3F);
    --primary-green: var(--user-secondary-color, #147358);
    --accent-gold: #C9A227;
    --primary-light: #E7F2ED;
    --bg-warm: #FAF8F3;
    --surface: #FFFFFF;
    --text-dark: #1F2A24;
    --text-gray: #6B7280;
    --border-soft: #E7E2D6;

    /* legacy aliases */
    --bg-gray: var(--bg-warm);
    --white: var(--surface);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

body {
    font-family: 'Cairo', 'Traditional Arabic', sans-serif!important;
    background-color: var(--bg-warm);
    color: var(--text-dark);

    
}

/* Brand font for titles */
.font-brand {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    letter-spacing: 0.01em;
}

/* Numbers and phones */
.font-mono {
    font-family: 'Cairo', sans-serif !important;
    font-variant-numeric: tabular-nums;
}

/* Islamic pattern background */
.islamic-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath d='M40 4 L64 24 L64 56 L40 76 L16 56 L16 24 Z'/%3E%3Cpath d='M40 4 L40 76 M16 24 L64 56 M64 24 L16 56'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
}

/* Custom color utilities */
.bg-custom-primary { background-color: var(--primary-dark); }
.bg-custom-secondary { background-color: var(--primary-green); }
.bg-custom-gold { background-color: var(--accent-gold); }
.text-custom-primary { color: var(--primary-dark); }
.text-custom-secondary { color: var(--primary-green); }
.text-custom-gold { color: var(--accent-gold); }
.border-custom-primary { border-color: var(--primary-dark); }
.border-custom-secondary { border-color: var(--primary-green); }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-warm);
}

::-webkit-scrollbar-thumb {
    background: var(--border-soft);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green);
}

/* Focus visible */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Modal Transitions */
.modal-enter {
    opacity: 0;
    transform: scale(0.9);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}
.modal-leave {
    opacity: 1;
    transform: scale(1);
}
.modal-leave-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 300ms, transform 300ms;
}

/* Card hover effects */
.hover-lift {
    transition: all 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Status badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-success {
    background: #d1fae5;
    color: #065f46;
}
.badge-warning {
    background: #fef3c7;
    color: #92400e;
}
.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}
.badge-info {
    background: #dbeafe;
    color: #1e40af;
}


.fa-bars:before, .fa-navicon:before{

    color: #505050 !important;
}


@media only screen and (max-width: 600px) {


main.flex-1.overflow-x-hidden.overflow-y-auto.bg-gray-50.p-4.lg\:p-6,main.flex-1.overflow-y-auto.p-4.md\:p-8.relative {
    padding-left: 0px!important;
}

#sidebar div.h-20 {
    padding-top: 4em;
    padding-bottom: 3em;
}

header.h-20.bg-white.shadow.flex.items-center.px-6 {
    border-bottom: solid 1px #006c474f!important;
}

.p-6 {
    padding: 0.5rem!important;
}

}

a.lg\:hidden.shrink-0.bg-custom-secondary.text-white.px-4.py-2.rounded-xl.font-bold.shadow.flex.items-center.gap-2 {
    background: rgb(2 172 115);
}

.font-brand {
    font-family: 'Cairo', 'Traditional Arabic', sans-serif;
}

button.w-full.text-white.font-bold.py-3.px-4.rounded-xl.shadow-lg.transition.flex.items-center.justify-center.gap-2:hover {
    background: #0b4f3f !important;
}

button.bg-custom-secondary.hover\:opacity-90.text-white.px-8.py-3.rounded-lg.font-bold.transition.shadow-lg.flex.items-center.gap-2 {
    background: #0b4f3f!important;
}


a.bg-custom-secondary.hover\:opacity-90.text-white.px-5.py-2\.5.rounded-xl.font-bold.transition.flex.items-center.gap-2.shadow-sm {
    background: #076600!important;
}

span.px-5.py-2\.5.bg-custom-secondary.text-white.rounded-xl.shadow-md.shadow-emerald-500\/20.font-bold {
    background: #0fc486;
}