@font-face {
    font-family: Webjala;
    src: url('../fonts/Gogh-ExtraBold.otf');
}

body {
    min-width: 360px;
}

p {
    font-size: small;
}

/* News/article HTML: paragraphs were forced to `small` above while lists inherited the
   wrapper’s Tailwind text-sm, so bullets looked larger than body copy. */
.article-body p {
    font-size: inherit;
}

.webjala-font {
    font-family: Webjala, sans-serif;
}

.login-logo {
    width: 72px;
    height: auto;
}

.validation-error {
    font-size: small;
    color: red;
}

/* Login/auth page centered box */
.login-box {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media screen and (min-width: 640px) {
    .login-box {
        width: 640px;
    }
}

/* Avatar */
.avatar {
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

/* Active theme button highlight */
.theme-btn.active {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Hide scrollbar but keep scrollable (cross-browser) */
.wj-hide-scrollbar {
    -ms-overflow-style: none;  /* IE / Edge */
    scrollbar-width: none;     /* Firefox */
}

.wj-hide-scrollbar::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}

/* Elegant main-surface background with vibrant layered gradients */
.wj-main-surface {
    background:
        radial-gradient(ellipse 90% 70% at 5% -10%, rgba(14, 76, 220, 0.24) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 95% 110%, rgba(168, 56, 255, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(5, 190, 120, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 75% 15%, rgba(232, 88, 40, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(220, 60, 160, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse 55% 45% at 35% 95%, rgba(34, 197, 94, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 65% 55% at 50% 0%, rgba(250, 180, 50, 0.13) 0%, transparent 50%),
        radial-gradient(ellipse 45% 40% at 100% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 45% at 0% 50%, rgba(244, 63, 94, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 60% 70%, rgba(99, 102, 241, 0.10) 0%, transparent 45%);
    background-color: inherit;
}

:is(.dark) .wj-main-surface {
    background:
        radial-gradient(ellipse 90% 70% at 5% -10%, rgba(20, 60, 180, 0.36) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 95% 110%, rgba(120, 40, 210, 0.30) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 140, 85, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 75% 15%, rgba(190, 60, 20, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(180, 35, 120, 0.16) 0%, transparent 45%),
        radial-gradient(ellipse 55% 45% at 35% 95%, rgba(22, 163, 74, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse 65% 55% at 50% 0%, rgba(180, 120, 10, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 45% 40% at 100% 50%, rgba(8, 145, 178, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse 50% 45% at 0% 50%, rgba(190, 40, 70, 0.16) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 60% 70%, rgba(67, 56, 202, 0.14) 0%, transparent 45%);
    background-color: inherit;
}

/* -------------------------------------------------------------------------- */
/* Management list tables — max width by column kind, ellipsis, title tooltips */
/* -------------------------------------------------------------------------- */

.wj-mgr-table {
    width: 100%;
}

.wj-mgr-table .wj-cell-clip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.wj-mgr-table td[class*='wj-col-'] {
    overflow: hidden;
    vertical-align: middle;
}

.wj-mgr-table td.wj-col-thumb {
    width: 4.5rem;
    max-width: 4.5rem;
}

.wj-mgr-table td.wj-col-actions {
    width: 3.5rem;
    max-width: 3.5rem;
    overflow: visible;
}

/* Identifiers / GUIDs / client IDs — ~36ch at typical mono size */
.wj-mgr-table td.wj-col-id {
    max-width: 11rem;
}

/* Short codes / enums */
.wj-mgr-table td.wj-col-type {
    max-width: 9rem;
}

/* Counts / numeric summaries */
.wj-mgr-table td.wj-col-count {
    max-width: 7rem;
}

/* Display names, titles */
.wj-mgr-table td.wj-col-text {
    max-width: 18rem;
}

/* Email-like lines */
.wj-mgr-table td.wj-col-email-line {
    max-width: 16rem;
}

/* Company / organization */
.wj-mgr-table td.wj-col-company {
    max-width: 14rem;
}

/* City, country, address fragments */
.wj-mgr-table td.wj-col-location {
    max-width: 14rem;
}

/* Role chips / multi-badge */
.wj-mgr-table td.wj-col-roles {
    max-width: 22rem;
}

.wj-mgr-table td.wj-col-roles .wj-roles-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 3.25rem;
    overflow: hidden;
}

/* Status badges row */
.wj-mgr-table td.wj-col-status {
    max-width: 14rem;
}

.wj-mgr-table td.wj-col-status .wj-status-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    max-height: 3.25rem;
    overflow: hidden;
}

/* Primary cell: avatar + stacked name / subline (user, tenant, role rows) */
.wj-mgr-table td.wj-col-primary {
    max-width: 20rem;
    min-width: 0;
}

.wj-mgr-table td.wj-col-primary .wj-primary-stack {
    min-width: 0;
    max-width: 100%;
}

/* Tenant management member rows (flex list, not table) */
.wj-mgr-member-row .wj-mgr-member-text {
    max-width: min(18rem, 50vw);
    min-width: 0;
}

/* Admin desktop sidebar: collapsed state from localStorage applied in <head> before first paint */
@media (min-width: 1024px) {
    html.wj-sidebar-collapsed #sidebar {
        transform: translateX(-100%);
    }

    html.wj-sidebar-collapsed #mainContent {
        margin-left: 0 !important;
    }
}