html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

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

body {
    margin-bottom: 60px;
}

.bg-orange {
    background-color: #fd7e14;
    color: white;
}

/* Focus states */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus {
    border-color: #adb5bd !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Tables */
.table {
    width: 100%;
}

    .table th,
    .table td {
        vertical-align: middle;
    }

        .table td.text-nowrap {
            white-space: nowrap;
        }

    .table tbody tr {
        transition: background-color .2s ease;
    }

        .table tbody tr:hover {
            background: #f8f9fa;
        }

/* Cards */
.dashboard-card,
.report-card {
    border: none !important;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 .35rem .9rem rgba(0,0,0,.08);
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: pointer;
    will-change: transform;
}

    .dashboard-card:hover,
    .report-card:hover {
        transform: translateY(-5px) scale(1.012);
        box-shadow: 0 .75rem 1.4rem rgba(0,0,0,.13);
        z-index: 5;
    }

    .dashboard-card *,
    .report-card * {
        cursor: pointer;
    }

    .dashboard-card h5,
    .dashboard-card h2,
    .report-card h4,
    .report-card p {
        user-select: none;
    }

    .dashboard-card .card-body {
        padding: 2rem 1rem;
    }

    .dashboard-card h5 {
        font-weight: 600;
        margin-bottom: .75rem;
    }

    .dashboard-card h2 {
        font-size: 2.6rem;
        font-weight: 700;
    }

.card-header {
    font-weight: 600;
    letter-spacing: .3px;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
}

/* Buttons */
.btn {
    border-radius: 12px;
    transition: transform .22s ease, box-shadow .22s ease;
    will-change: transform;
}

    .btn:not(.dropdown-toggle):hover {
        transform: translateY(-4px) scale(1.015);
        box-shadow: 0 .7rem 1.4rem rgba(0,0,0,.13);
    }

.btn-primary:not(.dropdown-toggle):hover {
    box-shadow: 0 .8rem 1.6rem rgba(13,110,253,.25);
}

.create-ticket-btn {
    min-width: 190px;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.9rem 1.8rem;
    border-radius: 14px;
    box-shadow: 0 .35rem .8rem rgba(13,110,253,.18);
}

/* Badges */
.badge {
    font-size: .8rem;
    padding: .45rem .7rem;
    border-radius: 50rem;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .badge:hover {
        transform: scale(1.06);
        box-shadow: 0 .25rem .6rem rgba(0,0,0,.12);
    }

/* Forms */
.form-control,
.form-select {
    border-radius: 16px;
    height: 50px;
    padding-left: 16px;
    animation: none !important;
}

    .form-select,
    .form-select:hover,
    .form-select:focus,
    .form-select:active,
    select,
    select:hover,
    select:focus,
    select:active {
        transform: none !important;
    }

.form-select {
    transition: border-color .15s ease-in-out !important;
}

select.form-control,
select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    box-shadow: none !important;
    outline: none !important;
}

    select.form-control:focus,
    select.form-select:focus,
    select.form-control:active,
    select.form-select:active {
        background-color: #ffffff !important;
        border-color: #adb5bd !important;
        box-shadow: none !important;
        outline: none !important;
    }

option {
    background-color: #ffffff;
    color: #212529;
}

/* Dropdowns */
.dropdown-toggle,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle:active {
    transform: none !important;
    box-shadow: none !important;
}

.dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 .55rem 1.1rem rgba(0,0,0,.12);
    overflow: hidden;
}

.dropdown-item {
    transition: background-color .15s ease, color .15s ease;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #f8f9fa;
        color: #212529;
    }

/* Chart Containers */
.chart-box {
    height: 340px;
}

.chart-box-large {
    height: 360px;
}

/* Details Page */
.detail-box {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 1rem;
    height: 100%;
    transition: box-shadow .2s ease, background-color .2s ease;
}

    .detail-box:hover {
        box-shadow: 0 .35rem .8rem rgba(0,0,0,.08);
    }

/* Dark Mode */
body.dark-mode {
    background-color: #121212 !important;
    color: #f1f1f1 !important;
}

    body.dark-mode .navbar,
    body.dark-mode footer {
        background-color: #1f1f1f !important;
        border-color: #333 !important;
    }

        body.dark-mode .navbar a,
        body.dark-mode .navbar-brand,
        body.dark-mode footer,
        body.dark-mode footer a {
            color: #f1f1f1 !important;
        }

    body.dark-mode .card,
    body.dark-mode .report-card,
    body.dark-mode .list-group-item,
    body.dark-mode .card-body {
        background-color: #1e1e1e !important;
        color: #f1f1f1 !important;
        border-color: #333 !important;
    }

    body.dark-mode .table,
    body.dark-mode .table th,
    body.dark-mode .table td {
        color: #f1f1f1 !important;
        border-color: #333 !important;
    }

        body.dark-mode .table tbody tr:hover {
            background-color: #2b2b2b !important;
        }

    body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: #242424 !important;
        color: #f1f1f1 !important;
    }

    body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
        background-color: #1e1e1e !important;
        color: #f1f1f1 !important;
    }

    body.dark-mode .form-control,
    body.dark-mode .form-select {
        background-color: #1e1e1e !important;
        color: #f1f1f1 !important;
        border-color: #444 !important;
    }

        body.dark-mode .form-control::placeholder {
            color: #aaa !important;
        }

    body.dark-mode option {
        background-color: #1e1e1e;
        color: #f1f1f1;
    }

    body.dark-mode .text-muted {
        color: #b8b8b8 !important;
    }

    body.dark-mode .bg-white {
        background-color: #1e1e1e !important;
    }

    body.dark-mode .border,
    body.dark-mode .border-top,
    body.dark-mode .border-bottom {
        border-color: #333 !important;
    }
    /* ===========================
   DARK MODE IMPROVEMENTS
=========================== */

    /* Report page buttons */
    body.dark-mode .btn-outline-success {
        color: #4ade80 !important;
        border-color: #4ade80 !important;
    }

        body.dark-mode .btn-outline-success:hover {
            background: #4ade80 !important;
            color: #121212 !important;
        }

    /* Dark card headers */
    body.dark-mode .card-header.bg-dark {
        background: #2b2f33 !important;
        color: white !important;
    }

    /* Black buttons become gray */
    body.dark-mode .btn-dark {
        background: #3b3f45 !important;
        border-color: #3b3f45 !important;
    }

        body.dark-mode .btn-dark:hover {
            background: #555 !important;
            border-color: #555 !important;
        }

    /* Outline dark buttons */
    body.dark-mode .btn-outline-dark {
        color: #f8f9fa !important;
        border-color: #888 !important;
    }

        body.dark-mode .btn-outline-dark:hover {
            background: #f8f9fa !important;
            color: #121212 !important;
        }

    /* Navbar links */
    body.dark-mode .nav-link {
        color: #f8f9fa !important;
    }

        body.dark-mode .nav-link:hover {
            color: #4dabff !important;
        }

    /* Hero text */
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5 {
        color: white !important;
    }

    /* Tables */
    body.dark-mode thead {
        background: #2b2f33;
    }

    body.dark-mode th {
        color: white !important;
    }

    body.dark-mode td {
        color: #e5e5e5 !important;
    }

    /* Recent activity */
    body.dark-mode .list-group-item {
        background: #1e1e1e !important;
        color: white !important;
    }

    /* Chart cards */
    body.dark-mode canvas {
        background: transparent;
    }

/* Export button spacing */
.report-toolbar {
    margin-bottom: 22px;
}
/* Dark mode table fix */
body.dark-mode .table,
body.dark-mode table {
    background-color: #1e1e1e !important;
    color: #f1f1f1 !important;
}

    body.dark-mode .table thead,
    body.dark-mode .table thead tr,
    body.dark-mode .table thead th {
        background-color: #2b2f33 !important;
        color: #ffffff !important;
        border-color: #444 !important;
    }

    body.dark-mode .table tbody tr,
    body.dark-mode .table tbody td {
        background-color: #1e1e1e !important;
        color: #f1f1f1 !important;
        border-color: #444 !important;
    }

        body.dark-mode .table tbody tr:hover,
        body.dark-mode .table tbody tr:hover td {
            background-color: #2a2a2a !important;
            color: #ffffff !important;
        }

body.dark-mode .card {
    background-color: #1e1e1e !important;
}

/* Fix dropdowns in dark mode */
body.dark-mode select.form-control,
body.dark-mode select.form-select {
    background-color: #1e1e1e !important;
    color: #f1f1f1 !important;
    border-color: #444 !important;
}