/* AjonTec — Panel design repair layer (admin + user) */

/* 1. CHIPS / BADGES — readable in BOTH light and dark theme */
.badge.bg-light,
.badge.bg-light.text-dark,
.badge.bg-secondary-lt,
.badge.bg-light.border {
    background-color: #eef2ff !important;
    color: #1e3a8a !important;
    border: 1px solid #c7d2fe !important;
    font-weight: 600;
}
html[data-bs-theme="dark"] .badge.bg-light,
html[data-bs-theme="dark"] .badge.bg-light.text-dark,
html[data-atstheme="dark"] .badge.bg-light,
html[data-atstheme="dark"] .badge.bg-light.text-dark,
html[data-atstheme="night"] .badge.bg-light,
html[data-atstheme="night"] .badge.bg-light.text-dark {
    background-color: rgba(99,132,255,.18) !important;
    color: #c7d6ff !important;
    border-color: rgba(148,173,255,.35) !important;
}
.badge {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
}
.badge.bg-success,.badge.bg-danger,.badge.bg-info,
.badge.bg-primary,.badge.bg-secondary,.badge.bg-dark { color:#fff !important; }
.badge.bg-warning { color:#3d2b00 !important; }

/* 2. LIST IMAGES — a missing file must not resize the row */
.table img.avatar,
.table td > img,
.ats-mcard__avatar {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
    border-radius: 8px;
    background: #f1f5f9;
    overflow: hidden;
    text-indent: -9999px;
    color: transparent;
}
html[data-bs-theme="dark"] .table img.avatar,
html[data-bs-theme="dark"] .table td > img,
html[data-atstheme="dark"] .table img.avatar,
html[data-atstheme="night"] .table img.avatar { background: rgba(255,255,255,.07); }
.table > tbody > tr > td { vertical-align: middle; }
.table > tbody > tr > td > img { display: inline-block; }

/* 3. TABLE OVERFLOW — Action column must stay reachable */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.card > .table-responsive,
.card-body > .table-responsive { max-width: 100%; }
.ats-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ats-actions .btn { white-space: nowrap; }
.table td, .table th { word-break: break-word; }
.table td .fw-bold, .table td .fw-semibold { line-height: 1.35; }

/* 4. FILTER BAR — readable in dark theme too */
.ats-filter { background:#f6f8fc; border-color:#e3e8f0; }
html[data-bs-theme="dark"] .ats-filter,
html[data-atstheme="dark"] .ats-filter,
html[data-atstheme="night"] .ats-filter {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}
html[data-bs-theme="dark"] .ats-filter .form-label,
html[data-atstheme="dark"] .ats-filter .form-label,
html[data-atstheme="night"] .ats-filter .form-label { color:#aab4c4 !important; }

/* 5. MOBILE CARDS — surface colour follows the theme */
html[data-bs-theme="dark"] .ats-mcard,
html[data-atstheme="dark"] .ats-mcard,
html[data-atstheme="night"] .ats-mcard {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    color: inherit;
}
html[data-bs-theme="dark"] .ats-mcard__top,
html[data-atstheme="dark"] .ats-mcard__top,
html[data-atstheme="night"] .ats-mcard__top { border-bottom-color: rgba(255,255,255,.12); }
html[data-bs-theme="dark"] .ats-mcard__meta dt,
html[data-atstheme="dark"] .ats-mcard__meta dt,
html[data-atstheme="night"] .ats-mcard__meta dt { color:#aab4c4; }