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

/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* Base styles */
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #05070f;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='12' cy='18' r='1' fill='white'/><circle cx='38' cy='65' r='0.8' fill='white'/><circle cx='82' cy='28' r='1.1' fill='white'/><circle cx='55' cy='50' r='0.6' fill='white'/></svg>");
    background-repeat: repeat;
    margin: 0;
    min-height: 100vh;
    position: relative;
    color: white; /* ✅ FORCE readable text */
}

/* Glow overlay (fixed layering) */
body::before {
    content: "";
    position: fixed; /* ✅ important fix */
    inset: 0;
    background: radial-gradient(circle at 40% 60%, rgba(6,182,212,0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content stays above overlay */
body > * {
    position: relative;
    z-index: 1;
}

/* Cards */
.property-card,
.tenant-card,
.block {
    background: linear-gradient(145deg, #0a0c1a, #12151f);
    border: 1px solid rgba(103,232,249,0.25);
    border-radius: 1.5rem;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover effects */
.property-card:hover,
.tenant-card:hover,
.block:hover {
    border-color: #67e8f9;
    box-shadow: 0 0 40px rgba(103,232,249,0.35);
    transform: translateY(-4px);
}

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

button:hover {
    box-shadow: 0 0 25px rgba(103,232,249,0.4);
    transform: translateY(-1px);
}

/* Alerts */
.overdue-alert {
    border-left: 4px solid #ef4444;
    background: rgba(239,68,68,0.12);
}