@tailwind base;
@tailwind components;
@tailwind utilities;

/* =============================================================
   ZLHOST DESIGN SYSTEM — Custom Styles
   ============================================================= */

@layer base {
    html {
        scroll-behavior: smooth;
    }

    html[dir="rtl"] body {
        font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
    }

    html[dir="ltr"] body {
        font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
    }

    body {
        @apply bg-muted text-ink antialiased;
        font-feature-settings: 'kern', 'liga', 'calt';
    }

    h1, h2, h3, h4, h5 {
        @apply text-navy-900 font-bold tracking-tight;
    }

    a { @apply transition-colors duration-200; }

    [x-cloak] { display: none !important; }

    *:focus-visible {
        @apply outline-none ring-2 ring-brand-500 ring-offset-2 ring-offset-white;
    }
}

@layer components {

    /* ---------- Buttons ---------- */
    .btn {
        @apply inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm
               transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed select-none;
    }
    .btn-primary {
        @apply bg-green-fade text-white shadow-soft hover:shadow-cardHover hover:-translate-y-0.5;
    }
    .btn-secondary {
        @apply bg-navy-900 text-white hover:bg-navy-800 shadow-soft;
    }
    .btn-outline {
        @apply border-2 border-brand-600 text-brand-700 hover:bg-brand-50;
    }
    .btn-ghost {
        @apply text-navy-700 hover:bg-navy-50;
    }
    .btn-whatsapp {
        @apply bg-whatsapp text-white hover:bg-whatsapp-dark shadow-soft;
    }
    .btn-gold {
        @apply bg-gold-400 text-navy-900 hover:bg-gold-500 shadow-soft;
    }
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 shadow-soft;
    }
    .btn-sm { @apply px-3 py-1.5 text-xs rounded-lg; }
    .btn-lg { @apply px-7 py-3.5 text-base rounded-2xl; }

    /* ---------- Cards ---------- */
    .card {
        @apply bg-white rounded-2xl shadow-card border border-border/60
               transition-all duration-300;
    }
    .card-hover {
        @apply hover:shadow-cardHover hover:-translate-y-1 hover:border-brand-200;
    }
    .card-padded { @apply p-6 md:p-7; }

    /* ---------- Forms ---------- */
    .form-label {
        @apply block text-sm font-semibold text-navy-800 mb-2;
    }
    .form-input,
    .form-textarea,
    .form-select {
        @apply w-full bg-white border border-border rounded-xl px-4 py-2.5
               text-navy-900 placeholder:text-navy-400
               focus:border-brand-500 focus:ring-2 focus:ring-brand-100
               transition-all duration-200;
    }
    .form-error {
        @apply text-sm text-red-600 mt-1.5 flex items-center gap-1;
    }
    .form-help {
        @apply text-xs text-navy-500 mt-1.5;
    }

    /* ---------- Badges ---------- */
    .badge {
        @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold;
    }
    .badge-success { @apply bg-brand-50 text-brand-700 border border-brand-200; }
    .badge-warning { @apply bg-amber-50 text-amber-700 border border-amber-200; }
    .badge-info    { @apply bg-blue-50 text-blue-700 border border-blue-200; }
    .badge-danger  { @apply bg-red-50 text-red-700 border border-red-200; }
    .badge-neutral { @apply bg-navy-50 text-navy-700 border border-navy-200; }
    .badge-gold    { @apply bg-gold-50 text-gold-700 border border-gold-200; }

    /* ---------- Status Pills ---------- */
    .status-dot {
        @apply inline-block w-2 h-2 rounded-full ml-1 me-1;
    }

    /* ---------- Section ---------- */
    .section { @apply py-16 md:py-24; }
    .section-tight { @apply py-12 md:py-16; }
    .container-tight { @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8; }
    .container-wide { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
    .section-title { @apply mb-8 text-center mx-auto max-w-3xl; }

    /* ---------- Mega Header ---------- */
    .nav-link {
        @apply relative inline-flex items-center gap-1 px-3 py-2 rounded-lg
               text-sm font-semibold text-navy-800 hover:text-brand-700 hover:bg-brand-50/50
               transition-colors;
    }
    .nav-link-active {
        @apply text-brand-700 bg-brand-50;
    }

    /* ---------- Homepage rebuild (compiled, no CDN) ---------- */
    .zl-header {
        @apply bg-white/95 backdrop-blur-sm sticky top-0 z-40 border-b border-border/70 shadow-soft;
    }

    .zl-logo-img {
        @apply h-11 w-auto object-contain;
    }

    .zl-home {
        @apply bg-[#f6f8fb] text-navy-900;
    }

    .zl-hero {
        @apply relative overflow-hidden bg-white border-b border-border/70;
        background:
            radial-gradient(circle at 18% 20%, rgba(22, 163, 74, 0.13), transparent 24rem),
            linear-gradient(180deg, #ffffff 0%, #f7faf9 58%, #f3f6f8 100%);
    }

    .zl-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .55;
        background-image:
            linear-gradient(rgba(11, 31, 58, .04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(11, 31, 58, .04) 1px, transparent 1px);
        background-size: 34px 34px;
    }

    .zl-hero-visual {
        @apply relative mx-auto max-w-xl;
    }

    .zl-server-tower {
        @apply relative w-32 md:w-40 rounded-3xl bg-navy-900 p-4 shadow-cardHover border border-navy-700;
    }

    .zl-server-slot {
        @apply h-7 rounded-xl bg-navy-800 border border-navy-700 mb-2 flex items-center justify-between px-3;
    }

    .zl-device-card {
        @apply rounded-3xl bg-white shadow-cardHover border border-border/80 p-4;
    }

    .zl-trust-strip {
        @apply bg-white rounded-2xl border border-border/70 shadow-card overflow-hidden;
    }

    .zl-stat-card {
        @apply bg-white rounded-2xl border border-border/70 shadow-soft px-5 py-4 text-center;
    }

    .zl-service-column {
        @apply bg-white rounded-2xl border border-border/80 shadow-soft p-4 hover:shadow-cardHover transition-all;
    }

    .zl-service-row {
        @apply flex items-start gap-2 rounded-xl px-2.5 py-2 text-sm text-navy-700 hover:bg-brand-50 hover:text-brand-800;
    }

    .zl-check-icon {
        @apply mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-700;
    }

    .service-card {
        @apply bg-white rounded-2xl shadow-card border border-border/70 p-5 transition-all hover:shadow-cardHover hover:-translate-y-1;
    }

    .pricing-card {
        @apply bg-white rounded-2xl shadow-card border border-border/70 p-5 transition-all hover:shadow-cardHover hover:-translate-y-1;
    }

    /* ---------- Sidebar (Customer Dashboard) ---------- */
    .sidebar-link {
        @apply flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium
               text-navy-700 hover:bg-brand-50 hover:text-brand-700 transition-all;
    }
    .sidebar-link-active {
        @apply bg-brand-50 text-brand-700 shadow-soft border border-brand-100;
    }

    /* ---------- Tables ---------- */
    .table-zlhost {
        @apply w-full text-right text-sm;
    }
    html[dir="ltr"] .table-zlhost { @apply text-left; }
    .table-zlhost thead {
        @apply bg-navy-50/60 text-navy-700 uppercase text-xs tracking-wide;
    }
    .table-zlhost thead th { @apply px-4 py-3 font-bold; }
    .table-zlhost tbody td {
        @apply px-4 py-3.5 text-navy-800 border-t border-border/60;
    }
    .table-zlhost tbody tr:hover { @apply bg-muted/60; }

    /* ---------- Timeline ---------- */
    .timeline-item {
        @apply relative ps-8 pb-6 border-s-2 border-border;
    }
    .timeline-item::before {
        content: '';
        @apply absolute -start-2.5 top-0 w-5 h-5 rounded-full bg-white border-4 border-brand-500;
    }
    .timeline-item.is-current::before { @apply border-amber-500 animate-pulse-soft; }
    .timeline-item.is-failed::before  { @apply border-red-500; }

    /* ---------- WhatsApp FAB ---------- */
    .whatsapp-fab {
        @apply fixed bottom-6 z-50 flex items-center justify-center
               w-14 h-14 rounded-full bg-whatsapp text-white shadow-cardHover
               hover:bg-whatsapp-dark hover:scale-110 transition-all duration-300;
    }
    html[dir="rtl"] .whatsapp-fab { @apply left-6; }
    html[dir="ltr"] .whatsapp-fab { @apply right-6; }

    /* ---------- Empty state ---------- */
    .empty-state {
        @apply flex flex-col items-center justify-center text-center
               py-12 px-6 rounded-2xl bg-muted/40 border-2 border-dashed border-border;
    }

    /* ---------- Service Card hover ---------- */
    .service-icon-wrap {
        @apply inline-flex items-center justify-center w-12 h-12 rounded-xl
               bg-brand-50 text-brand-700 transition-all;
    }
    .card-hover:hover .service-icon-wrap {
        @apply bg-brand-600 text-white scale-110;
    }
}

@layer utilities {
    .text-balance { text-wrap: balance; }
    .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
    .scrollbar-thin::-webkit-scrollbar-thumb { @apply bg-navy-200 rounded-full; }

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

/* Print receipts/invoices */
@media print {
    .no-print { display: none !important; }
    body { @apply bg-white; }
}