/* --- GLOBAL RESET & BRAND INTEGRATION --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    /* Force the brand font from marketing.css */
    font-family: 'Inter', sans-serif !important;
    background-color: #fcfaff; /* Extremely light purple tint for background */
    color: #333;
}

/* --- LAYOUT WRAPPERS --- */
.container-fluid.flex-grow-1 {
    flex: 1 0 auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* --- BRANDED FORM & BUTTON OVERRIDES --- */
/* Replaces Teal focus with a Light Purple halo */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    /* 0.25rem glow using a light 25% opacity brand purple */
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(111, 66, 193, 0.25) !important;
    border-color: #6f42c1 !important;
}

/* --- ADMIN TABLE STYLING (The "Magic" Grid) --- */
.custom-header {
    background-color: #6f42c1 !important; /* Unified Magic Tagz Purple */
    color: white !important;
}

    .custom-header th {
        border: none;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.03em;
    }

        .custom-header th a {
            color: white !important;
            text-decoration: none;
        }

            .custom-header th a:hover {
                text-decoration: underline;
            }

.fixed-table {
    table-layout: fixed;
    width: 100%;
}

    /* Prevent long names from breaking the layout */
    .fixed-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 1rem 0.75rem;
    }

/* Row Hover Effect */
.table-hover tbody tr:hover {
    background-color: rgba(111, 66, 193, 0.03);
    transition: background-color 0.2s ease;
}

/* --- UI COMPONENTS --- */
mark {
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
    background-color: #fff3cd; /* Light amber for highlighting searches */
    color: #856404;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 6px;
}

/* Ensure tooltips don't wrap weirdly */
.tooltip-inner {
    max-width: 200px;
    font-size: 0.85rem;
    background-color: #5a2d9c; /* Darker Purple for Tooltips */
}

/* Status Badges */
.badge a:hover i {
    opacity: 1 !important;
    color: #dc3545; /* Critical red for delete/remove actions */
}

/* --- BREADCRUMBS --- */
.breadcrumb {
    background-color: transparent;
    padding-left: 0;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.breadcrumb-item a {
    text-decoration: none;
    color: #6f42c1; /* Brand Purple */
    font-weight: 600;
}

    .breadcrumb-item a:hover {
        color: #5a2d9c;
        text-decoration: underline;
    }

.breadcrumb-item.active {
    color: #6c757d;
}

/* --- DASHBOARD CARDS --- */
.admin-card {
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease;
}

    .admin-card:hover {
        transform: translateY(-3px);
    }


/* Branding for auxiliary links */
.text-purple {
    color: #6f42c1 !important;
    transition: all 0.2s ease;
    text-decoration: none; /* Keep it clean initially */
    position: relative;
}

    .text-purple:hover {
        color: #5a2d9c !important; /* Darker purple on hover */
        text-decoration: underline; /* Standard subtle affordance */
        text-underline-offset: 4px; /* Space it out for the "Inter" font */
    }

/* Specific styling for the Register link area */
.registration-prompt {
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

/* Branded "Danger" for Validation */
.text-danger {
    color: #e65b65 !important; /* Softened Coral/Rose */
    font-size: 0.825rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

/* Subtle background for the Validation Summary box */
.validation-summary-errors {
    background-color: rgba(230, 91, 101, 0.05);
    border-left: 3px solid #e65b65;
    padding: 1rem;
    border-radius: 0.5rem;
    color: #b03a42;
    margin-bottom: 1.5rem;
}

    .validation-summary-errors ul {
        margin-bottom: 0;
        padding-left: 1.25rem;
        list-style-type: none;
    }

/* Add a small icon to validation messages via CSS */
span.field-validation-error::before {
    content: "\F33A"; /* Bootstrap Icon: exclamation-circle */
    font-family: "bootstrap-icons";
    margin-right: 5px;
    vertical-align: middle;
}


/* --- SIDEBAR NAVIGATION --- */
#sidebarMenu {
    background-color: #ffffff;
    min-height: calc(100vh - 70px); /* Fill height below navbar */
    border-right: 1px solid rgba(111, 66, 193, 0.1);
}

    #sidebarMenu .nav-link {
        font-weight: 500;
        color: #495057;
        padding: 0.75rem 1.25rem;
        border-radius: 0.5rem;
        margin: 0.2rem 0.75rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
    }

        /* Hover State */
        #sidebarMenu .nav-link:hover {
            background-color: rgba(111, 66, 193, 0.05);
            color: #6f42c1;
        }

        /* Active/Current Page State */
        #sidebarMenu .nav-link.active {
            background-color: rgba(111, 66, 193, 0.1);
            color: #6f42c1;
            font-weight: 700;
        }

        #sidebarMenu .nav-link i {
            font-size: 1.1rem;
            width: 24px; /* Fixes icon alignment */
        }

/* Sidebar Headings (Management, Engagement, etc.) */
.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    color: #adb5bd;
    margin-top: 1.5rem;
}


/* --- GLOBAL LAYOUT SPACING --- */

main[role="main"] {
    /* Adds a consistent 4rem (approx 64px) gap above the footer */
    margin-bottom: 4rem;
}

/* For pages that use container-fluid (like the Dashboard) */
.container-fluid {
    padding-bottom: 2rem;
}

/* Ensure the flex-grow-1 is actually applied to push the footer */
.flex-grow-1 {
    flex-grow: 1 !important;
}

/* Dashboard Main Content Area Buffer */
main.col-md-9 {
    padding-bottom: 5rem !important;
}

/* --- DASHBOARD STABILITY OVERRIDE --- */
/* Global Card Stability */
.card, .card-magic, .card-hover {
    transform: none !important;
    transition: box-shadow 0.3s ease, border 0.3s ease !important;
}

    .card:hover, .card-magic:hover, .card-hover:hover {
        transform: none !important;
        /* We only change the shadow to indicate it's interactive */
        box-shadow: 0 0.5rem 2rem rgba(111, 66, 193, 0.15) !important;
    }


/* 3. Ensure the parent col doesn't shift */
.row.row-cols-1 .col {
    transition: none !important;
}


.hover-purple:hover {
    color: #6f42c1 !important;
    text-decoration: underline !important;
}

/* Standardize the "Magic Tagz" Breadcrumb Spacing */
nav[aria-label="breadcrumb"] {
    margin-bottom: 2rem !important;
    padding-top: 0.5rem;
}

.breadcrumb.smaller {
    font-size: 0.85rem;
    letter-spacing: 0.025em;
}