/**
 * SetEnforce Public UI - Enhanced Styles
 * Modern, professional design system
 */

/* ============================================
   CSS Variables for Design System
   ============================================ */

:root {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-secondary: #6366f1;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #06b6d4;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}

/* ============================================
   Enhanced Animations
   ============================================ */

@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.95);
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out;
}

.animate-pulse-ring {
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   Scroll Reveal
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Container & Layout
   ============================================ */

.container-custom {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-custom {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-custom {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ============================================
   Header & Navigation Enhancements
   ============================================ */

/* Sticky header with dynamic background on scroll */
header {
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* When scrolled - blue gradient matching hero section */
header.scrolled {
    background: linear-gradient(to right, #0f172a, #1e3a8a, #0f172a) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(59, 130, 246, 0.3) !important;
}

/* Ensure text stays white/visible when scrolled */
header.scrolled a,
header.scrolled span,
header.scrolled button {
    color: white !important;
}

header.scrolled .text-slate-700 {
    color: rgb(226, 232, 240) !important;
}

header.scrolled .text-slate-600 {
    color: rgb(203, 213, 225) !important;
}

/* Fix hover states for navigation links when scrolled */
header.scrolled a:hover,
header.scrolled button:hover {
    color: white !important;
    background-color: rgba(59, 130, 246, 0.5) !important; /* Semi-transparent blue */
}

/* Keep brand/logo link transparent on hover - target the logo container link */
header.scrolled nav > div > div:first-child a:hover {
    background-color: transparent !important;
}

/* Ensure user info sections maintain proper styling when scrolled */
header.scrolled .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Fix mobile menu button hover when scrolled */
header.scrolled #mobile-menu-button:hover {
    background-color: rgba(59, 130, 246, 0.5) !important;
}

/* Tier Badge Styling */
.tier-badge {
    font-size: 0.75rem; /* text-xs */
    padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
    border-radius: 0.25rem; /* rounded */
    background-color: #dbeafe; /* bg-blue-100 */
    color: #1e40af; /* text-blue-800 */
    font-weight: 500;
    display: inline-block;
}

/* Tier badge in normal (non-scrolled) header */
header:not(.scrolled) .tier-badge {
    background-color: #dbeafe; /* bg-blue-100 */
    color: #1e40af; /* text-blue-800 */
}

/* Tier badge when header is scrolled - better contrast */
header.scrolled .tier-badge {
    background-color: rgba(59, 130, 246, 0.9) !important; /* Solid blue background */
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

/* Mobile tier badge - smaller font size */
.tier-badge-mobile {
    font-size: 0.5rem; /* 8px - extra small for mobile */
    padding: 0.0625rem 0.25rem; /* Very compact padding */
    line-height: 1.2;
}

/* Header Navigation Helpers */
header nav {
    overflow: hidden;
}

header nav > div {
    overflow: visible;
}

/* Prevent text wrapping in navigation */
header nav .hidden.lg\\:flex a {
    flex-shrink: 0;
}

/* Ensure navigation items don't overflow */
header nav .hidden.lg\\:flex {
    flex-wrap: nowrap;
    overflow: hidden;
    flex-shrink: 1;
}

/* Logo container should be flexible but not shrink too much */
header .flex.items-center {
    min-width: 0;
    flex-shrink: 1;
}

header .flex.items-center a {
    min-width: 0;
    flex-shrink: 0;
}

header .flex.items-center .flex.flex-col {
    min-width: 0;
    overflow: hidden;
}

header .flex.items-center span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation container flex behavior */
header nav > div.flex {
    flex-wrap: nowrap;
}

/* Ensure buttons and links have minimum sizes */
header nav a.inline-flex {
    flex-shrink: 0;
}

/* Navigation text helpers */
.nav-text {
    display: inline;
}

/* ============================================
   Enhanced Quota Display
   ============================================ */

.quota-meter-new {
    position: relative;
    height: 0.5rem;
    background: linear-gradient(to right, #e2e8f0, #cbd5e1);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quota-fill-new {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #10b981, #3b82f6);
    border-radius: 9999px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.quota-fill-new.warning {
    background: linear-gradient(to right, #f59e0b, #ef4444);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.quota-fill-new.danger {
    background: linear-gradient(to right, #ef4444, #dc2626);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* ============================================
   Skeleton Loading States
   ============================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        #f1f5f9 0%,
        #e2e8f0 20%,
        #f1f5f9 40%,
        #f1f5f9 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s linear infinite;
    border-radius: var(--radius-md);
}

.skeleton-card {
    height: 200px;
    margin-bottom: 1rem;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 1rem;
}

/* ============================================
   Enhanced Status Indicators
   ============================================ */

.status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.status-indicator svg {
    margin-right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   Enhanced Card Styles
   ============================================ */

.card-elevated {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-elevated:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.card-interactive {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.card-interactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.card-interactive:hover::before {
    left: 100%;
}

/* ============================================
   Enhanced Buttons
   ============================================ */

.btn-enhanced {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-enhanced:hover::before {
    width: 300px;
    height: 300px;
}

/* ============================================
   Enhanced Tooltips
   ============================================ */

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    background-color: #1e293b;
    color: white;
    text-align: center;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    white-space: nowrap;
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
}

.tooltip .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ============================================
   Enhanced Progress Bars
   ============================================ */

.progress-bar-enhanced {
    position: relative;
    height: 0.75rem;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-fill-enhanced {
    height: 100%;
    background: linear-gradient(to right, #3b82f6, #6366f1);
    border-radius: 9999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.progress-fill-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 2s linear infinite;
}

/* ============================================
   Badge Styles
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-error {
    background: #fee2e2;
    color: #991b1b;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

/* Phase 10: DNS badge category - the third scoreboard badge chip colour.
   Teal is not in the compiled Tailwind build, so its shades live here and are
   reused by the scoreboard row chip and the "how to earn a badge" explainer. */
.badge-chip-dns {
    background-color: #ccfbf1; /* teal-100 */
    color: #115e59;            /* teal-800 */
}
.badge-dns-soft {
    background-color: #ccfbf1; /* teal-100 */
    color: #0f766e;            /* teal-700 */
}
.badge-dns-border {
    border-color: #99f6e4;     /* teal-200 */
}
.badge-dns-icon {
    color: #14b8a6;            /* teal-500 */
}

/* ============================================
   Glass Morphism Effect
   ============================================ */

.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   Responsive Utilities
   ============================================ */

/* Extra large screens - minor adjustments */
@media (max-width: 1440px) {
    header nav .hidden.lg\\:flex a {
        padding: 0.5rem 0.875rem;
        font-size: 0.9375rem;
    }
}

/* Large desktop - prevent navigation wrapping */
@media (max-width: 1280px) {
    .container-custom {
        max-width: 100%;
    }

    /* Tighter navigation spacing */
    header nav .hidden.lg\\:flex {
        gap: 0.125rem;
    }

    header nav .hidden.lg\\:flex a {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Reduce button padding */
    header nav .hidden.lg\\:flex a.inline-flex {
        padding: 0.5rem 0.875rem;
    }

    /* Smaller icon */
    header nav .hidden.lg\\:flex svg {
        width: 0.875rem;
        height: 0.875rem;
    }
}

/* Desktop - compact navigation */
@media (max-width: 1140px) {
    header nav .hidden.lg\\:flex a {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }

    header nav .hidden.lg\\:flex a.inline-flex {
        padding: 0.5rem 0.75rem;
    }

    /* Adjust divider spacing */
    header nav .hidden.lg\\:flex div.ml-2 {
        margin-left: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Shorten "Sign Up Free" to "Sign Up" */
    .nav-text {
        white-space: nowrap;
    }
}

@media (max-width: 1024px) {
    /* Reduce header height on smaller screens */
    header nav > div {
        min-height: 4rem;
        padding: 0.5rem 0;
    }

    /* Very compact navigation */
    header nav .hidden.lg\\:flex a {
        padding: 0.5rem 0.5rem;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    header nav .hidden.lg\\:flex a.inline-flex {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
    }

    /* Adjust logo size */
    header .flex.items-center a img {
        width: 3.5rem;
        height: 3.5rem;
    }

    header .flex.items-center span {
        font-size: 1.25rem;
    }

    header .flex.items-center span:nth-child(2) {
        font-size: 0.75rem;
    }
}

/* Critical range for half-screen on 1920px displays (~960px) */
@media (max-width: 1000px) {
    /* Ultra-compact navigation to prevent wrapping */
    header nav .hidden.lg\\:flex {
        gap: 0;
    }

    header nav .hidden.lg\\:flex a {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    header nav .hidden.lg\\:flex a.inline-flex {
        padding: 0.5rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Make icons smaller */
    header nav .hidden.lg\\:flex svg,
    header nav .hidden.lg\\:flex i {
        width: 0.75rem;
        height: 0.75rem;
        font-size: 0.75rem;
    }

    /* Tighter divider */
    header nav .hidden.lg\\:flex div.ml-2 {
        margin-left: 0.25rem;
        padding-left: 0.25rem;
    }

    /* Smaller logo */
    header .flex.items-center a img {
        width: 3rem;
        height: 3rem;
    }

    header .flex.items-center span {
        font-size: 1.125rem;
    }

    header .flex.items-center span:nth-child(2) {
        font-size: 0.6875rem;
    }

    /* Reduce button text */
    header nav .hidden.lg\\:flex a.inline-flex svg {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 950px) {
    /* Show abbreviated text or icons only */
    header nav .hidden.lg\\:flex a {
        padding: 0.375rem 0.375rem;
        font-size: 0.6875rem;
        gap: 0.25rem;
    }

    header nav .hidden.lg\\:flex a.inline-flex {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
    }

    /* Make the signup button more compact */
    header nav .hidden.lg\\:flex a.inline-flex svg.ml-2 {
        margin-left: 0.25rem;
    }
}

@media (max-width: 900px) {
    /* Even more compact for smaller splits */
    header nav .hidden.lg\\:flex a {
        padding: 0.375rem 0.25rem;
        font-size: 0.6875rem;
    }

    header nav .hidden.lg\\:flex a.inline-flex {
        padding: 0.375rem 0.375rem;
        font-size: 0.6875rem;
    }

    header .flex.items-center a img {
        width: 2.75rem;
        height: 2.75rem;
    }

    header .flex.items-center span {
        font-size: 1rem;
    }

    header .flex.items-center span:nth-child(2) {
        font-size: 0.625rem;
    }
}

@media (max-width: 850px) {
    .card-elevated {
        border-radius: var(--radius-lg);
    }

    .container-custom {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stack elements vertically on mobile */
    header .flex.flex-col {
        gap: 0.25rem;
    }

    /* Hide desktop nav, show mobile menu button at this breakpoint */
    header nav .hidden.lg\\:flex {
        display: none !important;
    }

    /* Show mobile menu button */
    header nav .lg\\:hidden {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .card-elevated {
        border-radius: var(--radius-lg);
    }

    .container-custom {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stack elements vertically on mobile */
    header .flex.flex-col {
        gap: 0.25rem;
    }

    /* Hide desktop nav, show mobile menu button */
    header nav .hidden.lg\\:flex {
        display: none !important;
    }
}

@media (max-width: 640px) {
    /* Further adjustments for small mobile screens */
    header .flex.items-center a img {
        width: 3rem;
        height: 3rem;
    }

    header .flex.items-center span {
        font-size: 1rem;
    }

    header .flex.items-center span:nth-child(2) {
        font-size: 0.625rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .no-print,
    header,
    footer,
    .print-hide {
        display: none !important;
    }

    .card-elevated {
        box-shadow: none;
        border: 2px solid #e2e8f0;
        page-break-inside: avoid;
    }

    body {
        background: white;
    }
}

/* ============================================
   Accessibility
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High contrast focus indicators */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Custom Scrollbar
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* ============================================
   Code Display Enhancements
   ============================================ */

pre code {
    display: block;
    padding: 1rem;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: var(--radius-md);
}

code {
    font-family: 'Courier New', monospace;
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background: #f1f5f9;
    border-radius: 0.25rem;
    color: #475569;
}

/* ============================================
   Gradient Backgrounds
   ============================================ */

.gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #dc2626 100%);
}

.gradient-dark {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* ============================================
   Hover Effects
   ============================================ */

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hover-glow {
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* ============================================
   Dashboard - KPI card entrance
   ============================================ */

@keyframes dash-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dash-rise {
    opacity: 0;
    animation: dash-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}