/*
 * MissingPage branding over the Metronic admin shell - the "modern" pass.
 *
 * Beyond recolouring: airier spacing, larger type, soft elevation instead of
 * borders, pill controls, and an accent bar on the active menu item. Still
 * CSS-only over Metronic's markup, so layout and behaviour are untouched and
 * the theme panel keeps working.
 *
 * Palette:
 *   ink #101216 / sidebar #12141a / hover #1b1f28
 *   cyan #46b7c5 (hover #3aa5b3), gradient partner #2e8fa3
 *   canvas #f5f7fb, card #fff, muted text #7b8492
 */

/* ---------- Sidebar ---------- */

.brand {
    background-color: #0d0f13 !important;
}

.aside,
.aside-menu {
    background-color: #12141a !important;
}

/* Roomier items, rounded highlight, and a cyan accent bar when active */
.aside-menu .menu-nav > .menu-item > .menu-link {
    margin: 2px 10px;
    border-radius: 10px;
    border-left: 3px solid transparent;
}

.aside-menu .menu-nav > .menu-item > .menu-link .menu-text {
    color: #aeb6c2 !important;
    font-size: 1.02rem;
    letter-spacing: .2px;
}

.aside-menu .menu-nav > .menu-item > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: #626b7a !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
.aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
.aside-menu .menu-nav > .menu-item > .menu-link:hover {
    background-color: #1b1f28 !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: #1b1f28 !important;
    border-left-color: #46b7c5;
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-text,
.aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-icon {
    color: #5fd0de !important;
}

/* Submenus */
.aside-menu .menu-nav .menu-submenu {
    background-color: #12141a !important;
}

.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link {
    margin: 1px 10px 1px 14px;
    border-radius: 8px;
}

.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link .menu-text {
    color: #939cab !important;
}

.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link:hover {
    background-color: #1b1f28 !important;
}

.aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text {
    color: #5fd0de !important;
}

.aside-menu .menu-nav .menu-submenu .menu-item > .menu-link .menu-bullet > span {
    background-color: #626b7a !important;
}

.aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link .menu-bullet > span {
    background-color: #46b7c5 !important;
}

/* ---------- Header and page chrome ---------- */

.header {
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e9edf3;
}

.content {
    background-color: #f5f7fb;
}

/* Page titles carry the page; let them speak up */
.subheader .subheader-title,
.subheader h1, .subheader h3 {
    color: #101216;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.2px;
}

.subheader .text-muted,
.subheader small {
    color: #8b93a1 !important;
}

.breadcrumb .breadcrumb-item a {
    color: #7b8492;
}

.breadcrumb .breadcrumb-item.active a,
.breadcrumb .breadcrumb-item:last-child a {
    color: #3aa5b3;
}

.footer,
.footer.bg-white {
    background-color: transparent !important;
    border-top: none;
}

/* ---------- Cards: elevation, not borders ---------- */

body .card.card-custom {
    border: none;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    transition: box-shadow .18s ease, transform .18s ease;
}

.card.card-custom > .card-header {
    border-bottom: 1px solid #f0f3f8;
    min-height: 56px;
}

.card.card-custom > .card-header .card-title,
.card.card-custom > .card-header .card-label {
    color: #101216;
    font-weight: 700;
    letter-spacing: -.2px;
}

/* ---------- Tables: airy rows, quiet chrome ---------- */

.table thead th,
table.dataTable thead th {
    color: #8b93a1 !important;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid #eef1f6 !important;
    border-top: none !important;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.table tbody td,
table.dataTable tbody td {
    color: #2a2f37;
    border-top: 1px solid #f3f5f9;
    vertical-align: middle;
    padding-top: .95rem;
    padding-bottom: .95rem;
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: #f4fbfc !important;
}

/* Pagination as pills */
.pagination .page-link {
    border: none;
    border-radius: 8px !important;
    margin: 0 2px;
    color: #46b7c5;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(70, 183, 197, .35);
}

/* ---------- Buttons: gradient primary, soft secondary ---------- */

.btn {
    border-radius: 10px;
}

.btn-primary {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(70, 183, 197, .35);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: linear-gradient(135deg, #3aa5b3, #257e91) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(70, 183, 197, .45);
}

.btn-light-primary {
    color: #2e8fa3 !important;
    background-color: rgba(70, 183, 197, .12) !important;
    border-color: transparent !important;
    font-weight: 600;
}

.btn-light-primary:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #46b7c5, #2e8fa3) !important;
}

/* Accents that were template blue */
.text-primary {
    color: #46b7c5 !important;
}

a.text-hover-primary:hover,
.text-hover-primary:hover {
    color: #3aa5b3 !important;
}

.checkbox > input:checked ~ span,
.switch input:checked ~ span:before {
    background-color: #46b7c5 !important;
}

.form-control {
    border-radius: 10px;
    border-color: #e2e7ef;
}

.form-control:focus {
    border-color: #46b7c5;
    box-shadow: 0 0 0 3px rgba(70, 183, 197, .15);
}

/* Badges as pills; only the primary one rebrands, semantics keep their colour */
.label, .badge {
    border-radius: 999px;
}

.label.label-primary,
.badge-primary {
    background-color: #46b7c5 !important;
}

/* ---------- Modals ---------- */

.modal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .22);
}

.modal .modal-header {
    border-bottom: 1px solid #f0f3f8;
}

.modal .modal-header .modal-title {
    color: #101216;
    font-weight: 700;
}

.scrolltop {
    background: linear-gradient(135deg, #46b7c5, #2e8fa3) !important;
}

/* ---------- Fixes observed on real screens ---------- */

/* The blue-on-navy logo disappears against the dark brand strip; a white chip
   keeps the existing asset legible without needing a second logo file. */
.brand img,
.header-brand-logo-default {
    background: #fff;
    border-radius: 10px;
    padding: 3px 10px;
    max-height: 40px;
}

/* Profile pictures in tables rendered at the image's native size, which made
   every Users row a portrait gallery. Thumbnail size, everywhere. */
.table img.img-circle,
table.dataTable img.img-circle {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(16, 24, 40, .15);
}