/* Custom Animations for Tekkura Cloud */

/* 1. Page Entry: Smooth Fade Up */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

body {
    animation: fadeUp 0.8s ease-out;
    background-color: #0f172a; /* Dark Background Base */
    color: #e2e8f0;
}

/* 2. Glassmorphism Cards */
.box, .widget, .card {
    background: rgba(30, 41, 59, 0.7) !important; /* Semi-transparent dark blue */
    backdrop-filter: blur(12px); /* The "Frosted Glass" blur */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3. Hover Effect (Levitate) */
.box:hover, .widget:hover, .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); /* Light Blue Glow */
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* 4. Inputs (Dark Mode Style) */
input, select, textarea {
    background-color: rgba(15, 23, 42, 0.8) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- TEXT COLOR FIXER (Force White Text) --- */

/* 1. Force main text to be white everywhere */
body, h1, h2, h3, h4, h5, h6, p, label, span, strong {
    color: #f1f5f9 !important; /* Bright White-Grey */
}

/* 2. Fix text inside the Cards/Boxes specifically */
.box, .card, .widget, .modal-content {
    color: #f1f5f9 !important;
}

/* 3. Make the grey "muted" text lighter so it's readable */
.text-muted, .dimmed {
    color: #cbd5e1 !important; /* Light Grey */
}

/* 4. Fix Links (Make them Blue instead of dark) */
a, .btn-link {
    color: #38bdf8 !important; /* Cyan Blue */
}

/* 5. Fix Input Text (So you can see what you type) */
input, select, textarea {
    color: #ffffff !important;
}
input::placeholder {
    color: #94a3b8 !important; /* Light grey placeholder */
}

/* 6. Fix Table Text (Invoices list, etc) */
.table td, .table th {
    color: #f1f5f9 !important;
}

.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important; /* Ensure it floats */
}

/* 2. Ensure the Navbar itself sits above the page content */
header, .navbar {
    z-index: 1050 !important;
    position: relative; 
}

/* 3. Fix for the specific stacking context caused by glassmorphism */
/* This tells the content container to stop trying to be on top */
#wrapper, .content-block {
    z-index: 1;
    position: relative;
}

/* --- CYBER USER MENU --- */

.btn-cyber {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #fff;
    padding: 5px 15px 5px 5px; /* Tighter padding on left for avatar */
    border-radius: 50px; /* Pill shape */
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.btn-cyber:hover, .btn-cyber[aria-expanded="true"] {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
    transform: translateY(-1px);
}

/* Avatar Glow Ring */
.avatar-container {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(45deg, #38bdf8, #818cf8); /* Brand Gradient Ring */
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.avatar-container img {
    border: 2px solid #0f172a; /* Dark border to separate image from ring */
    display: block;
    border-radius: 50%;
}

/* Dropdown Menu Styling */
.dropdown-menu-cyber {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-top: 10px !important;
    border-radius: 12px;
    padding: 0.5rem;
}

.dropdown-menu-cyber .dropdown-item {
    color: #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.2s;
}

.dropdown-menu-cyber .dropdown-item:hover {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    transform: translateX(5px);
}

.dropdown-divider {
    border-top-color: rgba(255,255,255,0.1);
}
/* --- FIX FOR UNCLICKABLE MODALS --- */

/* 1. Force the dark overlay to sit below the modal content */
.modal-backdrop {
    z-index: 1040 !important; 
}

/* 2. Force the Modal Wrapper to sit ABOVE your Navbar (which is 1050) */
.modal {
    z-index: 1060 !important; 
}

/* 3. Ensure the Modal Content box is the absolute highest priority */
.modal-content {
    z-index: 1070 !important;
    position: relative;
}

/* 4. Fix for buttons specifically to ensure they catch clicks */
.modal-footer .btn, 
.modal-body .btn {
    position: relative;
    z-index: 1080 !important;
    cursor: pointer;
}