@import "bootstrap/dist/css/bootstrap.min.css";
@import "bootstrap-icons/font/bootstrap-icons.css";
@import "sweetalert2/dist/sweetalert2.min.css";
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";

:root {
    --sidebar-width: 260px;
    --sidebar-bg: #1e293b;
    --sidebar-color: #94a3b8;
    --sidebar-active-bg: #3b82f6;
    --sidebar-active-color: #ffffff;
    --header-height: 64px;
    --body-bg: #f8fafc;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--body-bg);
    color: #334155;
    min-height: 100vh;
}

/* Sidebar Styling */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;
}

#sidebar::-webkit-scrollbar {
    width: 5px;
}
#sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
#sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

#sidebar .sidebar-brand {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#sidebar .nav-heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 1rem 1.25rem 0.35rem;
    font-weight: 700;
}

#sidebar .nav-link {
    color: var(--sidebar-color);
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    margin: 0.15rem 0.65rem;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

#sidebar .nav-link:hover {
    color: #f8fafc;
    background-color: rgba(255, 255, 255, 0.07);
}

#sidebar .nav-link.active {
    color: var(--sidebar-active-color);
    background-color: var(--sidebar-active-bg);
    font-weight: 600;
}

/* Accordion chevron animation */
#sidebar .nav-chevron {
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    opacity: 0.7;
    margin-left: auto;
}

#sidebar .nav-link:not(.collapsed) .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

#sidebar .nav-link:not(.collapsed):not(.active) {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.04);
}

/* Sub-nav styling for accordion sub modules */
#sidebar .sub-nav {
    padding-left: 0;
    margin: 0.2rem 0 0.4rem;
}

#sidebar .sub-nav .sub-link {
    padding: 0.48rem 1rem 0.48rem 2.6rem;
    font-size: 0.835rem;
    color: #94a3b8;
    margin: 0.1rem 0.65rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.15s ease;
}

#sidebar .sub-nav .sub-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

#sidebar .sub-nav .sub-link.active {
    color: #ffffff;
    background-color: rgba(59, 130, 246, 0.22);
    font-weight: 600;
}

#sidebar .sub-bullet {
    font-size: 0.35rem;
    margin-right: 0.65rem;
    opacity: 0.7;
    flex-shrink: 0;
}

#sidebar .sub-link.active .sub-bullet {
    color: #3b82f6;
    opacity: 1;
}

/* Main Layout Structure & Collapse */
#wrapper {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop Sidebar Hidden / Collapsed State */
body.sidebar-collapsed #sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed #wrapper {
    margin-left: 0;
}

/* Mobile Sidebar Behavior (< 992px) */
@media (max-width: 991.98px) {
    #sidebar {
        transform: translateX(-100%);
    }

    #wrapper {
        margin-left: 0;
    }

    body.sidebar-open #sidebar {
        transform: translateX(0);
    }
}

/* Mobile Backdrop Overlay */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.5);
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    backdrop-filter: blur(2px);
}

body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Header Navbar */
.top-navbar {
    height: var(--header-height);
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 999;
}

.main-content {
    padding: 1.75rem 1.5rem;
    flex: 1;
    min-width: 0;
}

/* Cards & Components */
.card-dashboard {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-dashboard .icon-shape {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.error-text,
.invalid-feedback-custom,
.invalid-feedback {
    color: #dc2626 !important;
    font-size: 0.84rem;
    font-weight: 500;
    margin-top: 0.35rem;
    display: block;
    width: 100%;
}

.input-group+.invalid-feedback-custom,
.input-group+.invalid-feedback {
    margin-top: 0.35rem;
}

/* Standalone inputs red border */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc2626 !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* Input group unified full rectangle red border */
.input-group.is-invalid,
.input-group:has(.is-invalid) {
    border: 1px solid #dc2626 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15) !important;
}

.input-group.is-invalid>.input-group-text,
.input-group.is-invalid>.form-control,
.input-group.is-invalid>.btn,
.input-group:has(.is-invalid)>.input-group-text,
.input-group:has(.is-invalid)>.form-control,
.input-group:has(.is-invalid)>.btn {
    border-color: transparent !important;
    background-image: none !important;
    padding-right: 0.75rem !important;
}

.input-group.is-invalid>.form-control:focus,
.input-group:has(.is-invalid)>.form-control:focus {
    box-shadow: none !important;
}

/* Role Badges with Unique Background Colors */
.badge-role {
    font-weight: 600;
    padding: 0.35em 0.65em;
    border-radius: 0.375rem;
    color: #ffffff !important;
    display: inline-block;
}

.badge-role-super-admin {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.badge-role-admin {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

.badge-role-manager {
    background-color: #9333ea !important;
    color: #ffffff !important;
}

.badge-role-editor {
    background-color: #ea580c !important;
    color: #ffffff !important;
}

.badge-role-user {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

.badge-role-moderator {
    background-color: #db2777 !important;
    color: #ffffff !important;
}

.badge-role-staff {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}

.badge-role-customer {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.badge-role-palette-0 {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}

.badge-role-palette-1 {
    background-color: #059669 !important;
    color: #ffffff !important;
}

.badge-role-palette-2 {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

.badge-role-palette-3 {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

.badge-role-palette-4 {
    background-color: #db2777 !important;
    color: #ffffff !important;
}

.badge-role-palette-5 {
    background-color: #0d9488 !important;
    color: #ffffff !important;
}

.badge-role-palette-6 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

.badge-role-palette-7 {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

.badge-role-palette-8 {
    background-color: #475569 !important;
    color: #ffffff !important;
}

.badge-role-palette-9 {
    background-color: #9333ea !important;
    color: #ffffff !important;
}

/* ==========================================================================
   DataTables Buttons Theme Styling (Light, Clean, Vibrant)
   ========================================================================== */
div.dt-buttons,
.dt-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    flex-wrap: wrap !important;
    margin-left: 0.75rem !important;
}

div.dt-buttons .btn-group {
    display: inline-flex !important;
    gap: 0.375rem !important;
    box-shadow: none !important;
}

/* Base button styling */
div.dt-buttons .dt-button,
div.dt-buttons .btn {
    border-radius: 0.375rem !important;
    padding: 0.32rem 0.68rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease-in-out !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/* Override and remove any dark gray background applied by Bootstrap / DataTables default */
div.dt-buttons .dt-button.btn-secondary,
div.dt-buttons .btn-secondary {
    background-color: #ffffff !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

div.dt-buttons .dt-button.btn-secondary:hover,
div.dt-buttons .btn-secondary:hover {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

/* Excel Button: Clean Emerald Green Theme */
div.dt-buttons .buttons-excel,
div.dt-buttons .btn-outline-success {
    background-color: #ffffff !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}
div.dt-buttons .buttons-excel:hover,
div.dt-buttons .btn-outline-success:hover {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #86efac !important;
    box-shadow: 0 2px 4px 0 rgba(22, 163, 74, 0.12) !important;
}

/* CSV Button: Clean Blue Theme */
div.dt-buttons .buttons-csv,
div.dt-buttons .btn-outline-primary {
    background-color: #ffffff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}
div.dt-buttons .buttons-csv:hover,
div.dt-buttons .btn-outline-primary:hover {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
    box-shadow: 0 2px 4px 0 rgba(37, 99, 235, 0.12) !important;
}

/* PDF Button: Clean Rose Red Theme */
div.dt-buttons .buttons-pdf,
div.dt-buttons .btn-outline-danger {
    background-color: #ffffff !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}
div.dt-buttons .buttons-pdf:hover,
div.dt-buttons .btn-outline-danger:hover {
    background-color: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fda4af !important;
    box-shadow: 0 2px 4px 0 rgba(225, 29, 72, 0.12) !important;
}

/* Print Button: Clean Slate Theme */
div.dt-buttons .buttons-print,
div.dt-buttons .btn-outline-dark {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
div.dt-buttons .buttons-print:hover,
div.dt-buttons .btn-outline-dark:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 2px 4px 0 rgba(51, 65, 85, 0.12) !important;
}

/* Copy Button: Clean Indigo Theme */
div.dt-buttons .buttons-copy,
div.dt-buttons .btn-outline-secondary {
    background-color: #ffffff !important;
    color: #4f46e5 !important;
    border: 1px solid #c7d2fe !important;
}
div.dt-buttons .buttons-copy:hover,
div.dt-buttons .btn-outline-secondary:hover {
    background-color: #eef2ff !important;
    color: #4338ca !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 2px 4px 0 rgba(79, 70, 229, 0.12) !important;
}

/* Reload Button: Clean Teal Theme */
div.dt-buttons .buttons-reload,
div.dt-buttons .btn-outline-info {
    background-color: #ffffff !important;
    color: #0d9488 !important;
    border: 1px solid #99f6e4 !important;
}
div.dt-buttons .buttons-reload:hover,
div.dt-buttons .btn-outline-info:hover {
    background-color: #f0fdfa !important;
    color: #0f766e !important;
    border-color: #5eead4 !important;
    box-shadow: 0 2px 4px 0 rgba(13, 148, 136, 0.12) !important;
}

/* Reset Button: Clean Subtle Gray Theme */
div.dt-buttons .buttons-reset,
div.dt-buttons .btn-outline-secondary.buttons-reset {
    background-color: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}
div.dt-buttons .buttons-reset:hover,
div.dt-buttons .btn-outline-secondary.buttons-reset:hover {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 4px 0 rgba(100, 116, 139, 0.12) !important;
}

/* DataTables Spin Animation for Reload */
@keyframes dt-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.spin-animation {
    display: inline-block;
    animation: dt-spin 0.75s linear infinite;
}