/* ===================================================================
   IoT Architecture Diagram Styling
   Standard CSS compiled specifically for Casper Theme compatibility
   =================================================================== */

/* ── Custom Utilities & Theme Fonts Override ── */
#iot-diagram-wrapper,
#iot-diagram-wrapper * {
    font-family: 'Inter', sans-serif !important;
    box-sizing: border-box;
}

#iot-diagram-wrapper h1,
#iot-diagram-wrapper h2,
#iot-diagram-wrapper h3,
#iot-diagram-wrapper h4,
#iot-diagram-wrapper h5,
#iot-diagram-wrapper h6,
#iot-diagram-wrapper p,
#iot-diagram-wrapper li {
    margin: 0;
    padding: 0;
}

#iot-diagram-wrapper {
    font-size: 20px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

#iot-diagram-wrapper .text-\[10px\],
#iot-diagram-wrapper .text-\[10px\] * {
    font-size: 13px !important;
    line-height: 16px !important;
}

#iot-diagram-wrapper .text-2xs,
#iot-diagram-wrapper .text-2xs * {
    font-size: 12px !important;
    line-height: 16px !important;
}

#iot-diagram-wrapper .text-xs,
#iot-diagram-wrapper .text-xs * {
    font-size: 14px !important;
    line-height: 16px !important;
}

#iot-diagram-wrapper .text-sm,
#iot-diagram-wrapper .text-sm * {
    font-size: 16px !important;
    line-height: 20px !important;
}

#iot-diagram-wrapper .text-lg,
#iot-diagram-wrapper .text-lg * {
    font-size: 20px !important;
    line-height: 28px !important;
}

#iot-diagram-wrapper .text-xl,
#iot-diagram-wrapper .text-xl * {
    font-size: 22px !important;
    line-height: 28px !important;
}

/* Reset list paddings and styles within the diagram wrapper */
#iot-diagram-wrapper ul,
#iot-diagram-wrapper ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Custom Scrollbar ── */
.iot-arch-section::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.iot-arch-section::-webkit-scrollbar-track {
    background: #1e203b;
}

.iot-arch-section::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
}

.iot-arch-section::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* ── Keyframes & Animations ── */
@keyframes borderStrokeAnimation {
    0% {
        stroke-dashoffset: 300;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.animate-continuous-stroke {
    stroke-dasharray: 100 200;
    animation: borderStrokeAnimation 3s linear infinite;
}

.animate-border-draw {
    position: relative;
}

@keyframes dataFlow {
    to {
        stroke-dashoffset: -20;
    }
}

.data-line-animated {
    stroke-dasharray: 4 6;
    animation: dataFlow 1s linear infinite;
}

/* Shimmer animations for flow lines */
@keyframes shimmerRight {
    100% {
        left: 200%;
    }
}

@keyframes shimmerLeft {
    100% {
        right: 200%;
    }
}

@keyframes shimmerDown {
    100% {
        top: 200%;
    }
}

@keyframes shimmerUp {
    100% {
        bottom: 200%;
    }
}

.flow-line-horiz {
    position: relative;
    overflow: hidden;
}

.flow-line-horiz::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmerRight 1.5s infinite linear;
}

.flow-line-horiz-rev::after {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(-90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmerLeft 1.5s infinite linear;
}

.flow-line-vert {
    position: relative;
    overflow: hidden;
}

.flow-line-vert::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmerDown 1.5s infinite linear;
}

.flow-line-vert-rev::after {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmerUp 1.5s infinite linear;
}

/* Icon Reveal Animations */
@keyframes popUpBounce {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.icon-reveal {
    opacity: 0;
    transform: scale(0);
}

.icon-reveal.visible {
    animation: popUpBounce 0.5s ease-out forwards;
}

/* Hover scales */
.service-block {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-block:hover {
    transform: translateY(-4px);
}

/* Pulse Animations */
@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 88, 164, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 12px 4px rgba(34, 88, 164, 0.2);
    }
}

.animate-icon-pulse {
    animation: iconPulse 2s infinite ease-in-out;
}

@keyframes continuousBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.animate-continuous-bounce {
    animation: continuousBounce 2s infinite ease-in-out;
}

@keyframes softPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

.animate-soft-pulse {
    animation: softPulse 3s infinite ease-in-out;
}

/* ── Neon Glow & Border Effects ── */
#iot-diagram-wrapper .border,
#iot-diagram-wrapper .border-2,
#iot-diagram-wrapper .border-l,
#iot-diagram-wrapper .border-r,
#iot-diagram-wrapper .border-t,
#iot-diagram-wrapper .border-b {
    border-color: #5078BB !important;
    box-shadow: 0 0 8px rgba(80, 120, 187, 0.6), 0 0 16px rgba(80, 120, 187, 0.3), inset 0 0 8px rgba(80, 120, 187, 0.2) !important;
}

#iot-diagram-wrapper .border-dashed {
    border-color: #5078BB !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 4px #5078BB);
}

#iot-diagram-wrapper .dashed-border {
    border: 1px dashed #cbd5e1;
}

#iot-diagram-wrapper .arrow-right {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    display: inline-block;
    margin-left: 2px;
}

#iot-diagram-wrapper .arrow-left {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid currentColor;
    display: inline-block;
    margin-right: 2px;
}

#iot-diagram-wrapper .arrow-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
    display: inline-block;
    margin-top: 2px;
}

#iot-diagram-wrapper .arrow-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid currentColor;
    display: inline-block;
    margin-bottom: 2px;
}

#iot-diagram-wrapper .arrow-right,
#iot-diagram-wrapper .arrow-left,
#iot-diagram-wrapper .arrow-down,
#iot-diagram-wrapper .arrow-up {
    color: #5078BB !important;
    filter: drop-shadow(0 0 4px #5078BB) drop-shadow(0 0 8px #5078BB);
}

svg[data-purpose="connecting-lines"] path {
    stroke: #5078BB !important;
    filter: drop-shadow(0 0 4px #5078BB) drop-shadow(0 0 8px #5078BB);
}

svg[data-purpose="connecting-lines"] marker path {
    fill: #5078BB !important;
}

/* ===================================================================
   Tailwind CSS Utility Classes Compiler for IoT Diagram
   =================================================================== */
.grid {
    display: grid !important;
}

.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.items-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-around {
    justify-content: space-around !important;
}

.justify-between {
    justify-content: space-between !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* Custom widths & heights */
.w-2\/3 {
    width: 66.666667% !important;
}

.w-1\/3 {
    width: 33.333333% !important;
}

.w-16 {
    width: 64px !important;
}

.w-20 {
    width: 80px !important;
}

.w-24 {
    width: 96px !important;
}

.w-48 {
    width: 192px !important;
}

.w-8 {
    width: 32px !important;
}

.w-6 {
    width: 24px !important;
}

.w-4 {
    width: 16px !important;
}

.w-3 {
    width: 12px !important;
}

.h-8 {
    height: 32px !important;
}

.h-4 {
    height: 16px !important;
}

.h-3 {
    height: 12px !important;
}

.h-6 {
    height: 24px !important;
}

.w-\[1px\] {
    width: 1px !important;
}

.h-\[1px\] {
    height: 1px !important;
}

.w-\[90px\] {
    width: 90px !important;
}

.w-\[150px\] {
    width: 150px !important;
}

.w-\[70px\] {
    width: 70px !important;
}

.w-\[60px\] {
    width: 60px !important;
}

.w-\[40px\] {
    width: 40px !important;
}

.w-\[20px\] {
    width: 20px !important;
}

.w-\[50px\] {
    width: 50px !important;
}

.h-\[180px\] {
    height: 180px !important;
}

.h-\[230px\] {
    height: 230px !important;
}

.h-\[480px\] {
    height: 480px !important;
}

.h-\[500px\] {
    height: 500px !important;
}

.h-\[380px\] {
    height: 380px !important;
}

.min-h-screen {
    min-height: 100vh !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-y-auto {
    overflow-y: auto !important;
}

/* Paddings and margins */
.p-4 {
    padding: 16px !important;
}

.p-6 {
    padding: 24px !important;
}

.p-3 {
    padding: 12px !important;
}

.pr-4 {
    padding-right: 16px !important;
}

.pl-4 {
    padding-left: 16px !important;
}

.pl-2 {
    padding-left: 8px !important;
}

.pt-4 {
    padding-top: 16px !important;
}

.py-1 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.px-3 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.mb-2 {
    margin-bottom: 8px !important;
}

.mb-3 {
    margin-bottom: 12px !important;
}

.mb-6 {
    margin-bottom: 24px !important;
}

.mt-2 {
    margin-top: 8px !important;
}

.mt-4 {
    margin-top: 16px !important;
}

.mt-8 {
    margin-top: 32px !important;
}

.-mt-6 {
    margin-top: -24px !important;
}

.-mt-\[1px\] {
    margin-top: -1px !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.py-8 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

/* Offsets */
.-right-\[60px\] {
    right: -60px !important;
}

.-right-8 {
    right: -32px !important;
}

.right-4 {
    right: 16px !important;
}

.top-4 {
    top: 16px !important;
}

.top-1/3 {
    top: 33.333333% !important;
}

.top-1/2 {
    top: 50% !important;
}

.left-0 {
    left: 0 !important;
}

.left-12 {
    left: 48px !important;
}

.left-\[30px\] {
    left: 30px !important;
}

.left-\[110px\] {
    left: 110px !important;
}

.left-\[140px\] {
    left: 140px !important;
}

.left-\[165px\] {
    left: 165px !important;
}

.left-\[170px\] {
    left: 170px !important;
}

.left-\[200px\] {
    left: 200px !important;
}

.left-\[240px\] {
    left: 240px !important;
}

.left-\[310px\] {
    left: 310px !important;
}

.left-\[380px\] {
    left: 380px !important;
}

.left-\[400px\] {
    left: 400px !important;
}

.left-\[450px\] {
    left: 450px !important;
}

.left-\[500px\] {
    left: 500px !important;
}

.left-\[-50px\] {
    left: -50px !important;
}

.left-\[60px\] {
    left: 60px !important;
}

.right-\[-20px\] {
    right: -20px !important;
}

/* Top Offsets */
.top-\[20px\] {
    top: 20px !important;
}

.top-\[40px\] {
    top: 40px !important;
}

.top-\[60px\] {
    top: 60px !important;
}

.top-\[70px\] {
    top: 70px !important;
}

.top-\[100px\] {
    top: 100px !important;
}

.top-\[160px\] {
    top: 160px !important;
}

.top-\[200px\] {
    top: 200px !important;
}

.top-\[270px\] {
    top: 270px !important;
}

.top-\[280px\] {
    top: 280px !important;
}

.top-\[285px\] {
    top: 285px !important;
}

.top-\[300px\] {
    top: 300px !important;
}

.top-\[400px\] {
    top: 400px !important;
}

/* Heights */
.h-\[370px\] {
    height: 370px !important;
}

.h-\[400px\] {
    height: 400px !important;
}

/* Others */
.max-w-\[1440px\] {
    max-width: 1440px !important;
}

.z-\[-1\] {
    z-index: -1 !important;
}

/* Rounded corners */
.rounded-xl {
    border-radius: 12px !important;
}

.rounded-lg {
    border-radius: 8px !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

.rounded {
    border-radius: 4px !important;
}

/* Backgrounds and text colors */
.bg-\[\#111326\] {
    background-color: #111326 !important;
}

.bg-\[\#1c1e36\] {
    background-color: #1c1e36 !important;
}

.bg-arch-light-green\/20 {
    background-color: rgba(31, 133, 90, 0.2) !important;
}

.bg-arch-light-blue\/20 {
    background-color: rgba(34, 88, 164, 0.2) !important;
}

.text-white {
    color: #ffffff !important;
}

.text-gray-200 {
    color: #e2e8f0 !important;
}

.text-gray-300 {
    color: #cbd5e1 !important;
}

.text-gray-400 {
    color: #94a3b8 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-normal {
    font-weight: 400 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-0 {
    z-index: 0 !important;
}

.grid-cols-\[380px_300px_1fr\] {
    grid-template-columns: 380px 300px 1fr !important;
}

.grid-cols-\[100px_300px_1fr_420px\] {
    grid-template-columns: 100px 300px 1fr 420px !important;
}

/* Lists spacing */
.space-y-2> :not([hidden])~ :not([hidden]) {
    margin-top: 8px !important;
}

.gap-2 {
    gap: 8px !important;
}

.gap-6 {
    gap: 24px !important;
}

/* ── Text Input & Textarea Styling (Matching other forms) ── */
#iot-diagram-wrapper input[type="text"],
#iot-diagram-wrapper input[type="email"],
#iot-diagram-wrapper input[type="tel"],
#iot-diagram-wrapper textarea,
.iot-arch-section input[type="text"],
.iot-arch-section input[type="email"],
.iot-arch-section input[type="tel"],
.iot-arch-section textarea {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 0.85rem 1.05rem !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}

#iot-diagram-wrapper input::placeholder,
#iot-diagram-wrapper textarea::placeholder,
.iot-arch-section input::placeholder,
.iot-arch-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

#iot-diagram-wrapper input:focus,
#iot-diagram-wrapper textarea:focus,
.iot-arch-section input:focus,
.iot-arch-section textarea:focus {
    border-color: #8CB5FF !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 0 8px rgba(140, 181, 255, 0.12) !important;
}