/**
 * Global CSS – common rules used across multiple pages.
 * Load this first; then load page-specific CSS from assets/css/pages/
 */

/* ========== DataTables ========== */
.dt-button {
    border-radius: 13px;
    border: none;
    color: white;
    background: #0575E6;
    padding: 5px 10px;
    font-size: 15px;
}

.dt-buttons {
    padding: 0 1.5rem;
}

.dataTables_info {
    color: #8392ab;
    font-size: .875rem;
    margin-left: 1.5rem;
    display: inline-block;
}

.dataTables_paginate {
    float: right;
    display: inline-block;
    margin-right: 1.5rem !important;
}

/* ========== Generic data table (add class data-table-app to table) ========== */
.data-table-app tbody tr td {
    white-space: normal;
    align-items: middle;
    text-align: center;
    font-size: 0.875rem;
    font-weight: bold;
    color: #344767;
}

.data-table-app thead tr th {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #8392AB;
    text-transform: uppercase;
    opacity: 0.7;
}

.data-table-app tbody tr td button {
    width: 40px;
    height: 40px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-table-app tbody tr td button i {
    font-size: 20px;
}

/* ========== Navbar / Sidebar collapse arrow ========== */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    content: '';
    width: .5em;
    height: .5em;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: initial;
    margin-left: auto;
    transform: rotate(-45deg) translate(0, -50%);
    transform-origin: top;
    transition: all .3s ease-out;
    margin-top: 5px;
}

.navbar-vertical .navbar-nav .active[data-bs-toggle="collapse"]:after {
    color: white;
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    transform: rotate(-135deg) translate(0, -50%);
}

/* ========== Sidebar common ========== */
.ayb-sidebar-logo {
    width: 50px;
    height: auto !important;
}

.font-powered {
    text-align: right;
    margin-bottom: 5px;
    margin-right: -2px;
    font-size: 10px;
}

.font-driven {
    text-align: right;
    margin-bottom: 5px;
    margin-right: 10px;
    font-size: 10px;
}

.flag-alert {
    display: inline-block;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 8px;
    border-radius: 50%;
    margin-left: 6px;
}

/* ========== Dashboard-style layout (card, banner, header) ========== */
.bg-header {
    background: #011538 !important;
}

.banner {
    width: 100%;
    height: auto;
    margin: auto;
}

.card {
    background-size: cover !important;
    background-repeat: no-repeat;
    margin-bottom: 25px !important;
    background-color: white !important;
}

.card-body {
    background-color: transparent !important;
}

/* ========== Footer ========== */
@media (min-width: 1200px) {
    .footer {
        margin-left: 15.6rem;
    }
}