/* ==========================================================================
   CodakCRM — Creative UI Redesign & HTML Live Preview Tool Styling
   ========================================================================== */

:root {
    --codak-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --codak-font-heading: 'Outfit', 'Inter', sans-serif;
    --codak-primary: #005a70;
    --codak-primary-gradient: linear-gradient(135deg, #005a70 0%, #007c9b 100%);
    --codak-primary-light: #f0f7f9;
    --codak-primary-hover: #004557;
    --codak-accent: #00a4c8;
    --codak-border-radius: 14px;
    --codak-card-shadow: 0 12px 32px -6px rgba(0, 45, 60, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
    --codak-card-hover-shadow: 0 20px 48px -8px rgba(0, 70, 90, 0.16), 0 8px 20px -4px rgba(0, 0, 0, 0.06);
    --codak-transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   HTML LIVE PREVIEW TOOL STYLING
   ======================================================================== */
.html-editor-panel .panel-body {
    padding: 12px !important;
}

.html-textarea {
    background-color: #0f172a !important;
    color: #38bdf8 !important;
    font-family: "Fira Code", "Courier New", monospace !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
    resize: vertical !important;
    padding: 14px !important;
}

.html-textarea:focus {
    border-color: #00a4c8 !important;
    box-shadow: 0 0 0 3px rgba(0, 164, 200, 0.25) !important;
}

.html-preview-canvas {
    background-color: #ffffff;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   ADVANCED SIDEBAR & NAVIGATION ANIMATIONS
   ========================================================================== */

/* Sidebar Navigation Items Transitions */
#navbar .tabs>li,
.navbar-nav>li,
.sidebar-item {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease !important;
}

#navbar .tabs>li>a,
.navbar-nav>li>a {
    position: relative;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden;
}

/* Hover Shimmer & Slide Effect on Sidebar Items */
#navbar .tabs>li>a:hover,
.navbar-nav>li>a:hover {
    background: rgba(0, 164, 200, 0.08) !important;
    color: var(--codak-accent) !important;
}

/* Sidebar Hover Ripple Light Effect */
#navbar .tabs>li>a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease-in-out;
}

#navbar .tabs>li>a:hover::before {
    left: 100%;
}

/* Active Sidebar Tab Animated Left Border & Pulse */
#navbar .tabs>li.active>a {
    border-left: 4px solid var(--codak-accent) !important;
    background: linear-gradient(90deg, rgba(0, 90, 112, 0.15) 0%, transparent 100%) !important;
    animation: sidebarPulse 3s ease-in-out infinite;
}

@keyframes sidebarPulse {

    0%,
    100% {
        box-shadow: inset 3px 0 10px -2px rgba(0, 164, 200, 0.3);
    }

    50% {
        box-shadow: inset 3px 0 18px 0px rgba(0, 164, 200, 0.6);
    }
}

/* Icon Micro-Animation on Navigation Hover */
#navbar .tabs>li>a:hover .fas,
#navbar .tabs>li>a:hover .far,
#navbar .tabs>li>a:hover .glyphicon,
#navbar .tabs>li>a:hover i {
    animation: iconBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--codak-accent) !important;
}

@keyframes iconBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25) rotate(-5deg);
    }

    100% {
        transform: scale(1.1) rotate(0deg);
    }
}


/* ==========================================================================
   TEXT ANIMATIONS & TYPOGRAPHY REVEAL EFFECTS
   ========================================================================== */

/* 1. Shimmer Gradient Text Animation */
.animate-shimmer-text,
.page-header h2,
.header-title {
    background: linear-gradient(120deg, #005a70 0%, #00a4c8 40%, #007c9b 70%, #005a70 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 5s linear infinite;
    font-family: var(--codak-font-heading);
    font-weight: 700;
}

@keyframes textShimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* 2. Typewriter Effect for Titles / Subtitles */
.animate-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--codak-accent);
    animation: typing 3.5s steps(40, end), blinkCursor 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blinkCursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--codak-accent);
    }
}

/* 3. Staggered Entrance & Reveal Animation (Safe Component Scope)
   NOTE: animation fill-mode:forwards with a transform in the final keyframe
   creates a permanent stacking context on the element for as long as it lives
   in the DOM. This trapped dashlet/panel dropdowns.
   Fix: animate opacity only — no transform in keyframes — so no context is created.
   Elements that need a physical "slide up" can use a separate wrapper. */
.animate-fade-up,
.admin-search-container {
    animation: fadeInOnly 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* .dashlet and .panel-dashlet entrance: opacity fade, no transform —
   dashlets must not carry a stacking context (they contain «...» dropdowns) */
.dashlet,
.panel-dashlet {
    animation: fadeInOnly 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInOnly {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Smooth Interactive Card Hover Lift (Widget & Dashlet Scope)
   IMPORTANT: No transform on .dashlet or .panel-dashlet — they contain
   dropdown menus. Transform creates a stacking context that clips those menus.
   Use shadow depth + border-color for the lift illusion instead.
   (The actual hover rule lives in custom-brand.css section 16; this block
    is intentionally left to shadow-only to avoid conflicts.) */
.admin-content-section:hover {
    box-shadow: var(--codak-card-hover-shadow) !important;
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Table Row Smooth Hover Animation */
.table tr.item-row {
    transition: background-color 0.2s ease !important;
}

.table tr.item-row:hover {
    background-color: rgba(0, 164, 200, 0.05) !important;
}

/* Hard Security Guarantee: Prevent Sticky Headers in Role/Edit tables from displaying when hidden */
.sticky-header-scope.hidden,
.sticky-header-field.hidden,
div.hidden.sticky-head {
    display: none !important;
    visibility: hidden !important;
}

/* Smooth Floating & Sticky Detail Action Toolbar (.detail-button-container) */
.detail-button-container:not(.hidden),
.detail-button-container.stick-sub:not(.hidden),
.detail-button-container.sticked:not(.hidden),
.detail-button-container.has-sticked-bar:not(.hidden) {
    position: sticky !important;
    top: 48px !important;
    z-index: 100 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}