/* ===== GLOBAL ===== */
body {
    background-color: #ffffff;
    color: #222;
}

/* ===== AVATAR ===== */
.avatar {
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 4px;
}

.avatar-name-left {
    display: flex;
    align-items: center;
}

/* ===== HEADER ===== */
.litebans-header {
    display: block;
    text-align: center;
    color: #004586;
    font-weight: 600;
}

.col-lg-12 {
    text-align: center;
}

/* ===== NAVBAR ===== */
.navbar {
    position: static;
    font-weight: 600;
    background-color: #004586 !important;
}

.navbar-brand {
    font-weight: 500;
    color: #ffffff !important;
}

.navbar a {
    color: #ffffff !important;
}

.navbar-active {
    font-weight: 700;
    text-decoration: underline;
}

.my-lg-0 {
    font-weight: 400;
}

/* ===== TABLES ===== */
th {
    text-align: center;
    color: #004586;
    font-weight: 600;
}

table tr td {
    padding-left: 0;
    padding-right: 0;
    vertical-align: middle !important;
    text-align: center;
}

table {
    background: #ffffff;
}

tr.hover:hover {
    background-color: #f5f7fa;
    cursor: pointer;
}

/* ===== LINKS ===== */
a {
    color: #004586;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #003366;
}

/* ===== TEXT ===== */
p {
    margin-top: 2px;
    color: #444;
}

/* ===== CHECK FORM ===== */
.litebans-check {
    text-align: left;
}

.litebans-check-btn {
    margin-left: 5px;
    background-color: #004586;
    color: white;
    border: none;
}

.litebans-check-btn:hover {
    background-color: #003366;
}

.litebans-check-form {
    margin-left: 15px;
}

.litebans-check-output {
    margin-left: 3px;
}

/* ===== PAGER ===== */
.litebans-pager {
    font-size: 30px;
    color: #004586;
}

.litebans-pager-number {
    margin-top: 24px;
    text-align: center;
    font-size: 15px;
    color: #747474;
}

.litebans-pager-left {
    float: left;
}

.litebans-pager-right {
    float: right;
}

.litebans-pager-active {
    color: #004586;
}

.litebans-pager-inactive {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

/* ===== INDEX ===== */
.litebans-index {
    text-align: center;
}

.litebans-index-main {
    font-weight: bold;
    color: #004586;
}

.litebans-index-sub {
    font-weight: lighter;
    color: #747474;
}

/* ===== BADGES ===== */
.badge,
.badge-pill {
    font-weight: 500;
}

/* ===== LABELS ===== */
.litebans-label-container {
    display: inline-flex;
}

.litebans-label-info {
    margin-left: 15px;
    font-size: 17px;
    font-weight: 700;
    color: #004586;
}

/* Status labels */
.litebans-label-inactive {
    background-color: #747474;
    color: #fff;
}

.litebans-label-expired {
    background-color: #999;
    color: #fff;
}

.litebans-label-active {
    background-color: #004586;
    color: #fff;
}

.litebans-label-permanent {
    background-color: #004586;
    color: #fff;
}

.litebans-label-ipban,
.litebans-label-ipmute {
    background-color: #004586;
    color: #fff;
}

/* ===== HISTORY LABELS ===== */
.litebans-label-history {
    display: inline;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.litebans-label-ban {
    background-color: #004586;
}

.litebans-label-mute {
    background-color: #747474;
}

.litebans-label-warn {
    background-color: #b36b00;
}

.litebans-label-kick {
    background-color: #555;
}

/* ===== UTIL ===== */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noalign-w {
    width: 0;
}

.noalign-h {
    height: 0;
}

/* ===== MODERN TABLE DESIGN ===== */

/* Table container */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Header */
th {
    background-color: #004586;
    color: #ffffff;
    font-weight: 600;
    padding: 12px;
    text-align: center;
}

/* Rounded corners for header */
th:first-child {
    border-top-left-radius: 10px;
}

th:last-child {
    border-top-right-radius: 10px;
}

/* Table cells */
td {
    padding: 12px 10px;
    text-align: center;
    color: #333;
}

/* Row styling */
tr {
    transition: all 0.2s ease;
}

/* Soft row separation */
tr:not(:last-child) td {
    border-bottom: 1px solid #f0f0f0;
}

/* Hover effect */
tr:hover {
    background-color: #f5f8fc;
    transform: scale(1.005);
}

/* Remove old harsh styles */
table tr td {
    padding-left: 10px;
    padding-right: 10px;
}

/* Alternate row shading (subtle) */
tr:nth-child(even) {
    background-color: #fafafa;
}

/* First/last row rounding */
tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* ===== CLICKABLE ROW FEEL ===== */
tr.hover:hover {
    cursor: pointer;
    background-color: #eef4fb;
}

/* ===== BADGE IMPROVEMENTS INSIDE TABLES ===== */
.badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* ===== SMOOTH AVATAR ALIGNMENT ===== */
.avatar {
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.avatar:hover {
    transform: scale(1.1);
}

/* ===== MOBILE FRIENDLIER ===== */
@media (max-width: 768px) {
    td, th {
        padding: 8px;
        font-size: 13px;
    }
}