/* ==========================================================================
   TIPTOP GLOBAL STYLES (tiptop-core.css)
   ========================================================================== */

/* =========================================================
   BRIGHT "TECH BLUE" THEME OVERRIDE (Replaces Default Primary)
========================================================= */

:root {
    /* Bright, crisp code-editor blue */
    --bs-primary: #0066cc;
    --bs-primary-rgb: 0, 102, 204;
}

/* --- 1. Utilities (Text, Backgrounds, Borders) --- */
.text-primary {
    color: #0066cc !important;
}

.bg-primary {
    background-color: #0066cc !important;
    color: #ffffff !important;
}

.border-primary {
    border-color: #0066cc !important;
}

/* --- 2. Solid Primary Buttons --- */
.btn-primary {
    background-color: #0066cc !important;
    border-color: #0066cc !important;
    color: #ffffff !important;
}

    /* Darken slightly to a richer blue when hovered or clicked */
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: #0052a3 !important;
        border-color: #004080 !important;
        color: #ffffff !important;
    }

/* --- 3. Outline Primary Buttons --- */
.btn-outline-primary {
    color: #0066cc !important;
    border-color: #0066cc !important;
    background-color: transparent !important;
}

    /* Fill with bright blue when hovered */
    .btn-outline-primary:hover,
    .btn-outline-primary:focus,
    .btn-outline-primary:active {
        background-color: #0066cc !important;
        border-color: #0066cc !important;
        color: #ffffff !important;
    }

/* --- 4. Miscellaneous Accents --- */
.badge.bg-primary {
    background-color: #0066cc !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #0066cc !important;
}

/* --- BASE LAYOUT --- */
body {
    padding-top: 130px;
    background-color: #f4f6f8;
}

.maino {
    margin-bottom: 62px;
    min-height: calc(100vh - 192px);
}

a {
    text-decoration: none !important;
}

/* --- TYPOGRAPHY & BUTTONS --- */
/* User Request: Slimmer but larger fonts on buttons */
.btn-brite {
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0px #000 !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
    font-weight: 500 !important; /* Slimmer font */
    font-size: 1.1rem !important; /* Slightly larger */
    letter-spacing: 0.3px;
    border-radius: 6px;
}

    .btn-brite:hover {
        transform: translate(-3px, -3px) !important;
        box-shadow: 6px 6px 0px #000 !important;
    }

    .btn-brite:active {
        transform: translate(2px, 2px) !important;
        box-shadow: 0px 0px 0px #000 !important;
    }
/* --- BRIGHT TEXT UTILITIES (Optimized for #333 backgrounds) --- */

.ctext-lime {
    color: #a6e22e !important;
}
/* Punchy, classic terminal green */
.ctext-cyan {
    color: #00e5ff !important;
}
/* Electric cyan / neon blue */
.ctext-yellow {
    color: #ffeb3b !important;
}
/* Bright, crisp warning yellow */
.ctext-orange {
    color: #ff9800 !important;
}
/* Warm, glowing orange */
.ctext-pink {
    color: #ff4081 !important;
}
/* Vibrant hot pink */
.ctext-purple {
    color: #b388ff !important;
}
/* Bright pastel lavender/purple */
.ctext-coral {
    color: #ff6b6b !important;
}
/* Soft but bright red/coral */
.ctext-mint {
    color: #69f0ae !important;
}
/* Cool neon mint green */

/* --- NAVBAR & MENUS --- */
.navbar-dark {
    border-bottom: 3px solid #375a7f;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.dropdown-menu {
    border: 2px solid #375a7f;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.dropdown-item {
    font-weight: 600;
    padding: 0.5rem 1rem;
}

    .dropdown-item:hover {
        background-color: rgba(55, 90, 127, 0.1);
    }

    .dropdown-item i {
        width: 25px;
        text-align: center;
        color: #375a7f;
    }

/* Avatar */
.avatar-box {
    width: 38px;
    height: 38px;
    background-color: #e95420;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border: 2px solid #000;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .avatar-box:hover {
        transform: scale(1.15);
    }

.dropdown-toggle.no-caret::after {
    display: none;
}

/* --- SECOND ROW ICONS (Global) --- */
.nav-scroller {
    background-color: #fff;
    border-bottom: 2px solid #375a7f;
    padding: 8px 0;
}

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none !important;
}

    .icon-container:hover {
        transform: scale(1.15);
    }

.icon-label {
    font-size: 11px;
    text-align: center;
    color: black;
    text-transform: capitalize;
    font-weight: 600;
    margin-top: 4px;
}

.badge-corner {
    position: absolute;
    top: -8px;
    right: 0px;
    font-size: 0.75rem;

}
/* The Animation Instructions */
@keyframes heartbeat-pulse {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); /* Starts with a small red shadow */
    }

    10% {
        transform: scale(0.95); /* Slightly enlarges the badge */
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); /* Ring expands and fades out completely */
    }

    20% {
        transform: scale(0.8); /* Shrinks back to normal size */
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }

    100% {
        transform: scale(0.8); /* Stays still for the remaining 4 seconds */
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* The Class you will add to your HTML */
.badge-pulse {
    animation: heartbeat-pulse 5s infinite;
}

/* Custom Icon Colors */
.fad2 {
    --fa-secondary-color: black;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.def {
    --fa-primary-color: red;
}

.tsk {
    --fa-primary-color: #0dcaf0;
}

.boo {
    --fa-primary-color: #ffc107;
}

.atsk {
    --fa-primary-color: lime;
}

.job {
    --fa-primary-color: black;
    --fa-secondary-color: white;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

.cal {
    --fa-primary-color: #0a58ca;
}

.map {
    --fa-primary-color: #dc3545;
}

.build {
    --fa-primary-color: #ff9e35;
}

/* --- OFFCANVAS & FOOTER --- */
.offcanvas-end {
    border-left: 3px solid #375a7f !important;
    box-shadow: -4px 0px 15px rgba(0,0,0,0.1);
}

.stucko {
    position: fixed;
    width: 100%;
    z-index: 1000;
    bottom: 0;
    left: 0;
    border-top: 3px solid #375a7f;
    background: #fff;
}

.smaller {
    font-size: 0.8rem;
}

.footer-defect {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    text-decoration: none !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .footer-defect:hover {
        transform: scale(1.15);
    }

/* ==========================================================================
   PAGE-SPECIFIC STYLES
   ========================================================================== */

/* --- INDEX PAGE (.idx prefix) --- */
.idx-dash-card {
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    border-radius: 8px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    position: relative;
    color: #000;
    background-color: #fff;
}

    .idx-dash-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: 7px 7px 0px #000;
        color: #000;
    }

    .idx-dash-card:active {
        transform: translate(2px, 2px);
        box-shadow: 0px 0px 0px #000;
    }

.idx-dash-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.idx-dash-title {
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.idx-dash-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1rem;
    border: 2px solid #000;
    box-shadow: 2px 2px 0px #000;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.idx-brite-table {
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

    .idx-brite-table th {
        border-bottom: 2px solid #000;
        text-transform: uppercase;
        font-weight: 800;
    }

    .idx-brite-table td {
        border-bottom: 1px solid #ccc;
        vertical-align: middle;
    }

.idx-clickable-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

    .idx-clickable-row:hover {
        background-color: rgba(0,0,0,0.05);
    }

.idx-urgent-banner {
    background-color: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 2px solid #000;
    padding: 10px 15px;
}

.idx-news-heading {
    font-weight: 700;
    font-size: 1.1rem;
}

.idx-news-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
}

/* Brite Colors for Cards */
.bg-brite-warning {
    background-color: #ffc107;
}

.bg-brite-info {
    background-color: #0dcaf0;
}

.bg-brite-primary {
    background-color: #0d6efd;
    color: #fff !important;
}

/* The Vertical Button */
.vertical-tab-btn {
    width: 50px;
    writing-mode: vertical-rl; /* Turns the text sideways */
    transform: rotate(180deg); /* Flips it so it reads bottom-to-top */
    letter-spacing: 2px;
    border-left: none !important;
}

/* The Slide-Right Animation */
.slide-right-menu.show {
    animation: slideOutRight 0.2s ease-out forwards;
}

@keyframes slideOutRight {
    0% {
        transform: translateX(-15px);
        opacity: 0;
    }

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

/* ==========================================
   GLOBAL CLICK-TO-COPY
   ========================================== */
.click-to-copy {
    cursor: pointer;
    transition: transform 0.1s ease-in-out, color 0.2s;
    display: inline-block; /* Required so the scale transform works smoothly */
}

    .click-to-copy:hover {
        color: #0d6efd !important; /* Bootstrap primary blue, change to any color you like! */
    }

    .click-to-copy:active {
        transform: scale(1.15); /* The satisfying click pop */
    }

/* Prevents the floating 'Copied!' badge from accidentally blocking your mouse */
.pointer-events-none {
    pointer-events: none;
}

/* ==========================================
   CUSTOM ACCORDION STYLING (Overrides Bootstrap's Blue)
   ========================================== */

/* 1. Change the background and text color when the accordion is OPEN */
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa !important; /* Changes it to white (or use #f8f9fa for light gray) */
    color: #212529 !important; /* Keeps the text dark instead of turning blue */
    box-shadow: none !important; /* Removes the blue border line at the bottom */
}

/* 2. Remove the blue "glow" ring when you click the button */
.accordion-button:focus {
    border-color: rgba(0,0,0,.125) !important;
    box-shadow: none !important;
}
/* Automatically toggle folder icons based on accordion state */
.accordion-button.collapsed .folder-open {
    display: none !important;
}

.accordion-button:not(.collapsed) .folder-closed {
    display: none !important;
}

/* Custom Letter Spacing Utilities */
.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-3 {
    letter-spacing: 3px;
}

.ls-sm {
    letter-spacing: 0.05em;
}

.ls-md {
    letter-spacing: 0.1em;
}

.ls-lg {
    letter-spacing: 0.15em;
}

/* 1. Fix the double-spacing gap INSIDE the editor while typing */
.note-editable p {
    margin-bottom: 0.25rem !important;
}

/* 2. Fix the double-spacing gap on the saved notes (both top-level and replies) */
.beefy-notes-widget .card-body p,
.beefy-notes-widget .list-group-item p {
    margin-bottom: 0.25rem !important;
}

/* Fix browser autofill shrinking the font size */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    font-size: 1rem !important;
    /* Optional: If you want to stop the background from turning yellow/blue on autofill, uncomment the line below */
    /* -webkit-box-shadow: 0 0 0 30px white inset !important; */
}

    /* Chrome autofill sometimes wraps the text in a shadow DOM element, this forces that to resize too */
    input:-webkit-autofill::first-line {
        font-size: 1rem !important;
    }