/* custom.css */

/* --- Sidebar --- */
/* If your sidebar div has a specific class, use that.
   Otherwise, you might need to add one or target it structurally.
   Assuming a class 'app-sidebar' for the main sidebar div (w-64 bg-gray-800 in previous example) */
.app-sidebar {
    background-color: #1e293b; /* slate-800 */
    /* width: 16rem; /* w-64 - Tailwind handles this if class is present */
}

/* --- Content Area Header --- */
/* Assuming a class 'content-header' for the header within the content area */
.content-header {
    background-color: #ffffff; /* white */
    border-bottom: 1px solid #e2e8f0; /* slate-200 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); /* shadow-sm like */
    height: 4rem; /* h-16 */
    /* Flex properties are usually handled by Tailwind classes */
}

    .content-header .user-name-display { /* For the user name text */
        color: #334155; /* slate-700 */
        font-size: 0.875rem; /* text-sm */
        font-weight: 500; /* font-medium */
    }

    .content-header .admin-badge { /* For the admin role badge */
        background-color: #ccfbf1; /* teal-100 */
        color: #115e59; /* teal-700 */
        font-size: 0.75rem; /* text-xs */
        font-weight: 600; /* font-semibold */
        padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
        border-radius: 9999px; /* rounded-full */
        margin-left: 0.25rem; /* ml-1 */
    }

    .content-header .logout-button { /* For the logout button icon area */
        color: #94a3b8; /* slate-400 */
        padding: 0.25rem; /* p-1 */
        border-radius: 9999px; /* rounded-full */
    }

        .content-header .logout-button:hover {
            color: #14b8a6; /* teal-500 */
            background-color: #f1f5f9; /* slate-100 */
        }
    /* Focus ring for buttons (general) */
    .content-header button:focus-visible,
    .app-button:focus-visible { /* Assuming .app-button for general buttons */
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #14b8a6; /* ring-2 ring-teal-500 */
    }


/* --- Main Content Area (where @Body is rendered) --- */
/* Assuming a class 'main-content-body' for the <main> tag */
.main-content-body {
    padding: 1.5rem; /* p-6 */
    /* overflow-y: auto; - usually handled by Tailwind */
}

/* custom.css */

/* --- NavMenu Logo/Brand Area --- */
/* Assuming a class 'nav-brand-area' for the logo container */
.nav-brand-area {
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    padding-top: 1rem; /* py-4 (adjust as needed) */
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
}

    .nav-brand-area .brand-icon { /* For the <span class="bi bi-bar-chart-line-fill ..."> */
        color: #5eead4; /* teal-400 */
        font-size: 1.875rem; /* text-3xl */
        margin-right: 0.5rem; /* mr-2 */
    }

    .nav-brand-area .brand-text { /* For the <a> Poll Bull </a> */
        color: #ffffff; /* white */
        font-size: 1.25rem; /* text-xl */
        font-weight: 700; /* font-bold */
        letter-spacing: -0.025em; /* tracking-tight */
    }

/* --- NavMenu Links --- */
/* Targeting NavLink components directly or add a common class to them */
/* If NavLinks are rendered as <a> tags with a class like 'nav-link-item' */
.nav-link-item { /* This would be the class you add to each NavLink component if not using Tailwind directly */
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem; /* py-2.5 px-3 (approx) */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    border-radius: 0.375rem; /* rounded-md */
    color: #cbd5e1; /* slate-300 */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    margin-bottom: 0.375rem; /* space-y-1.5 approx */
}

    .nav-link-item:hover {
        background-color: #334155; /* slate-700 */
        color: #ffffff; /* white */
    }

    .nav-link-item.active { /* Blazor adds 'active' class */
        background-color: #0d9488; /* teal-600 */
        color: #ffffff; /* white */
    }

    .nav-link-item .nav-icon-span { /* For the <span class="bi ... nav-icon"> */
        margin-right: 0.75rem; /* mr-3 */
        flex-shrink: 0;
        height: 1.5rem; /* h-6 */
        width: 1.5rem; /* w-6 */
        color: #94a3b8; /* slate-400 */
        transition: color 0.15s ease-in-out;
        display: inline-block; /* Ensure icon aligns well */
        line-height: 1.5rem; /* Align icon vertically if needed */
    }

    .nav-link-item:hover .nav-icon-span {
        color: #e2e8f0; /* slate-200 */
    }

    .nav-link-item.active .nav-icon-span {
        color: #ffffff; /* white */
    }
/* custom.css */

/* --- Cards --- */
/* Assuming cards have a class like 'content-card' */
.content-card {
    background-color: #ffffff; /* white */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07); /* shadow-lg like */
}

    .content-card .card-title {
        font-size: 1.25rem; /* text-xl */
        font-weight: 600; /* font-semibold */
        color: #1e293b; /* slate-800 */
        margin-bottom: 1rem; /* mb-4 */
    }

    .content-card .card-text {
        color: #475569; /* slate-600 */
    }

    .content-card .card-icon-background { /* For icon backgrounds in stat cards */
        background-color: #14b8a6; /* teal-500 */
        border-radius: 0.5rem; /* rounded-lg */
        padding: 0.75rem; /* p-3 */
    }

        .content-card .card-icon-background .bi { /* Icon inside the accent background */
            font-size: 1.5rem; /* text-2xl */
            color: #ffffff; /* white */
        }

/* --- Buttons --- */
/* Base button style (add class 'app-button' to buttons) */
.app-button {
    font-weight: 600; /* font-semibold */
    padding: 0.625rem 1rem; /* py-2.5 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.15s ease-in-out;
    border: 1px solid transparent; /* Base for outline buttons */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .app-button:focus-visible { /* Already defined above, but good to remember */
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px #14b8a6; /* ring-2 ring-teal-500 */
    }

    .app-button.primary-cta { /* e.g., <button class="app-button primary-cta"> */
        background-color: #14b8a6; /* teal-500 */
        color: #ffffff; /* white */
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* shadow-md like */
    }

        .app-button.primary-cta:hover {
            background-color: #0d9488; /* teal-600 */
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* shadow-lg like */
        }

    .app-button.secondary-outline {
        background-color: transparent;
        color: #0f766e; /* teal-600 */
        border-color: #14b8a6; /* teal-500 */
    }

        .app-button.secondary-outline:hover {
            background-color: #f0fdfa; /* teal-50 */
            /* border-color: transparent; (optional, if you want border to disappear on hover) */
        }

    .app-button.text-button {
        background-color: transparent;
        color: #475569; /* slate-600 */
        padding: 0.5rem 0.75rem; /* Adjust padding for text buttons */
        box-shadow: none;
    }

        .app-button.text-button:hover {
            color: #0f766e; /* teal-600 */
            background-color: #f1f5f9; /* slate-100 */
        }


/* --- Forms --- */
.form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #334155; /* slate-700 */
    margin-bottom: 0.25rem; /* mb-1 */
}

.form-input {
    width: 100%;
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #cbd5e1; /* slate-300 */
    padding: 0.625rem 0.75rem; /* py-2.5 px-3 (approx) */
    color: #0f172a; /* slate-900 */
    background-color: #ffffff; /* white */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03); /* shadow-sm like */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-input::placeholder {
        color: #94a3b8; /* slate-400 */
    }

    .form-input:focus {
        outline: none;
        border-color: #14b8a6; /* teal-500 */
        box-shadow: 0 0 0 1px #14b8a6; /* ring-1 ring-teal-500 */
    }
/* custom.css or <style> in Routes.razor/App.razor */

/* ... (keep existing styles from previous response for .nav-brand-area, .nav-link-item, .nav-icon-span etc.) ... */

/* Styles for main menu items that act as submenu toggles */
.nav-link-item.has-submenu {
    /* Ensures the button takes full width if you want text alignment to work as expected */
    /* width: 100%;
    text-align: left; /* If you want text aligned left, Tailwind class 'text-left' on button is better */
    /* display: flex; /* Already part of .nav-link-item */
    /* align-items: center; /* Already part of .nav-link-item */
    /* justify-content: space-between; /* If you want arrow always at the far right, but 'ml-auto' on arrow span is more flexible */
    cursor: pointer;
}

.submenu-arrow-icon {
    font-size: 0.75rem; /* text-xs */
    transition: transform 0.2s ease-in-out;
    color: #94a3b8; /* slate-400, same as nav-icon-span */
}

.nav-link-item.has-submenu:hover .submenu-arrow-icon {
    color: #e2e8f0; /* slate-200, same as nav-icon-span hover */
}

/* No specific style needed for .submenu-container with Tailwind's space-y and pl utilities,
   but you can add one if you need more control, e.g., for borders or background. */
.submenu-container {
    /* margin-top: 0.25rem; /* space-y-1 on parent div handles this */
    /* padding-left: 1.25rem; /* pl-5 on the div in Razor is better */
}

/* Styles for individual submenu links */
.submenu-link-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem; /* py-2 px-3 */
    /* Indentation is handled by pl-5 on submenu-container and icon margin */
    font-size: 0.875rem; /* text-sm */
    font-weight: 400; /* normal, slightly less prominent than main links */
    border-radius: 0.375rem; /* rounded-md */
    color: #cbd5e1; /* slate-300 */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    /* Ensure it takes full width of its container if needed */
    width: 100%;
    box-sizing: border-box;
}

    .submenu-link-item:hover {
        background-color: #334155; /* slate-700 */
        color: #ffffff; /* white */
    }

    .submenu-link-item.active { /* Blazor adds 'active' class */
        background-color: #0d9488; /* teal-600 */
        color: #ffffff; /* white */
        font-weight: 500; /* font-medium, make active submenu item slightly more prominent */
    }

    .submenu-link-item .submenu-icon { /* For icons within submenu items */
        margin-right: 0.75rem; /* mr-3 */
        flex-shrink: 0;
        height: 1.25rem; /* h-5, slightly smaller than main icons */
        width: 1.25rem; /* w-5 */
        font-size: 1rem; /* Adjust if Bootstrap Icons need explicit font-size */
        color: #94a3b8; /* slate-400 */
        transition: color 0.15s ease-in-out;
        display: inline-block;
        line-height: 1.25rem;
    }

    .submenu-link-item:hover .submenu-icon {
        color: #e2e8f0; /* slate-200 */
    }

    .submenu-link-item.active .submenu-icon {
        color: #ffffff; /* white */
    }