/* ========= Global Modern Overrides for AdminLTE/Bootstrap ========= */

/* Theme variables (tweak to your brand) */
:root {
    --brand-primary: #4f46e5;
    /* indigo-600 */
    --brand-secondary: #0ea5e9;
    /* sky-500 */
    --brand-accent: #22c55e;
    /* green-500 */
    --brand-warning: #f59e0b;
    /* amber-500 */
    --brand-danger: #ef4444;
    /* red-500 */
    --brand-info: #06b6d4;
    /* cyan-500 */
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --text: #0f172a;
    /* slate-900 */
    --muted: #64748b;
    /* slate-500 */
    --radius: 16px;
    --shadow: 0 10px 20px rgba(2, 6, 23, .08), 0 2px 6px rgba(2, 6, 23, .05);
}

/* Base/typography */
html {
    font-size: 16px;
}

body {
    color: var(--text);
    background: linear-gradient(180deg, #f6f7fb, #eef2ff);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
    letter-spacing: .2px;
}

small,
.text-muted {
    color: var(--muted) !important;
}

/* Utility helpers */
.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Multi-line truncate */
.truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Cards */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    background: linear-gradient(135deg, var(--surface), #f3f4f6);
    border-bottom: none;
    font-weight: 600;
}

/* AdminLTE widget-user */
.widget-user-header .widget-user-username,
.widget-user-header .widget-user-desc {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    width: 100%;
    display: block;
}

.widget-user-header .widget-user-username {
    color: #fff !important;
}

.widget-user-header .widget-user-desc {
    color: rgba(255, 255, 255, .8) !important;
}

.widget-user .widget-user-username strong {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.widget-user .widget-user-desc {
    font-size: .95rem;
}

/* Avatar */
.widget-user-image {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    margin: 1rem 0;
}

.widget-user .widget-user-image img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 8px 20px rgba(2, 6, 23, .15);
}

/* Description blocks */
.description-block {
    padding: 8px 0;
}

.description-block .description-text {
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .4px;
}

.description-block .description-header {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    overflow-wrap: anywhere;
}

/* Small boxes */
.small-box {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.small-box .inner h3 {
    font-size: clamp(1.25rem, 4vw, 2rem);
    margin: 0 0 .25rem;
}

.small-box .inner p {
    margin: 0;
    color: #f8fafc;
}

.small-box .icon {
    right: 12px;
    top: 12px;
    opacity: .25;
}

.small-box.bg-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
}

.small-box.bg-success {
    background: linear-gradient(135deg, #16a34a, var(--brand-accent));
}

.small-box.bg-warning {
    background: linear-gradient(135deg, #f97316, var(--brand-warning));
}

.small-box.bg-danger {
    background: linear-gradient(135deg, #dc2626, var(--brand-danger));
}

.small-box.bg-info {
    background: linear-gradient(135deg, #0891b2, var(--brand-info));
}

.small-box-footer {
    background: rgba(255, 255, 255, .15);
    color: #fff !important;
}

/* Info boxes */
.info-box {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
}

.info-box-icon {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.info-box .info-box-text {
    color: var(--muted);
}

.info-box .info-box-number {
    font-weight: 700;
}

/* Images: safety net */
img {
    max-width: 100%;
    height: auto;
}

/* Mobile-first fixes */
@media (max-width: 575.98px) {

    .row>.col-6,
    .row>.col-lg-6.col-6,
    .row>.col-md-6.col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .widget-user .widget-user-header {
        padding-right: 16px;
    }

    .widget-user .widget-user-image {
        position: static;
        margin: 12px auto 0;
        text-align: center;
    }

    .widget-user .widget-user-image img {
        width: 72px;
        height: 72px;
    }

    .small-box .inner h3 {
        font-size: 1.35rem;
    }

    .small-box .inner p {
        font-size: .95rem;
    }

    .description-block .description-header,
    .description-block .description-text,
    .widget-user .widget-user-username,
    .widget-user .widget-user-desc {
        overflow-wrap: anywhere;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .widget-user .widget-user-image img {
        width: 78px;
        height: 78px;
    }
}

/* Hover affordances */
.small-box:hover {
    transform: translateY(-2px);
    transition: transform .18s ease;
}

.info-box:hover {
    transform: translateY(-1px);
    transition: transform .18s ease;
}

.small-box a.small-box-footer:hover {
    background: rgba(255, 255, 255, .22);
}

/* ================= DIRECT FIXES ================= */

/* 1) Truly center header text vertically & horizontally */
.widget-user.widget-center .widget-user-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    min-height: 120px;
}

.widget-user-header .widget-user-username,
.widget-user-header .widget-user-desc {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    display: block;
}

.widget-user-header .widget-user-username {
    margin-bottom: .25rem !important;
}

.widget-user-header .widget-user-desc {
    margin-bottom: 0 !important;
}

/* 2) Avatar centered between header & footer */
.widget-user.widget-center .widget-user-image {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    margin: 1rem 0;
}

.widget-user.widget-center .widget-user-image img {
    width: 96px;
    height: 96px;
    object-fit: cover;
}

/* 3) Equal-height tiles */
.equal-row>[class*="col-"] {
    display: flex;
}

.equal-row .small-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.equal-row .box.box-widget {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.equal-row .box.box-widget .box-footer {
    margin-top: auto;
}

/* 4) Remove unwanted box-header styling */
.box.box-widget .box-header {
    border: none;
    padding: 0;
}

/* 5) Ensure header text colors on aqua header */
.widget-user-header .widget-user-username {
    color: #fff !important;
}

.widget-user-header .widget-user-desc {
    color: rgba(255, 255, 255, .85) !important;
}

/* 6) Mobile tweak for avatar */
@media (max-width:575.98px) {
    .widget-user.widget-center .widget-user-image img {
        width: 80px;
        height: 80px;
    }

    .widget-user.widget-center .widget-user-header {
        min-height: 110px;
    }
}

.bootstrap-select .dropdown-menu .inner {
    max-height: 300px;
    /* fallback if data-size not honored */
    overflow-y: auto;
}