/* General, theme-independent UI tweaks — use()'d unconditionally by UikitTheme itself (not a
 * Theme-variant concern, so this lives alongside forms.css/branding.css rather than under
 * themes/base.css, which only loads for a selected variant, never for plain UikitTheme). */

.uk-card-body {
    padding: 20px;
}

/* Dashboard tile badge (DashboardItem::getBadge()): pinned to the tile's top-right corner.
 * .uk-card is already `position: relative` (UIkit default), so this anchors correctly with no
 * extra positioning context needed. */
.dashboard-item-badge {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* Dashboard tiles (Core/Modules/Dashboard/Views/DashboardView.php): a long, unbroken word in a
 * tile's title/description (e.g. German compound nouns like "Unternehmenseinladungen") can
 * overflow past the card's edge instead of wrapping. `hyphens: auto` (paired with the `lang="de"`
 * already set on <html> in UikitTheme::renderLayout()) lets the browser insert its own
 * language-aware syllable breaks; `overflow-wrap` is the fallback for browsers/words it can't
 * hyphenate. */
.dashboard-item strong,
.dashboard-item p {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Any <a> wrapping a .uk-card (e.g. every Dashboard tile) gets a hover affordance, the same way
 * a button already visibly reacts to hover/press — otherwise a whole card acting as one big link
 * gives no feedback at all that it's clickable. BrutalistTheme overrides this with its own
 * hard-offset-shadow version to match that theme's blur-free aesthetic (see brutalist.css). */
a .uk-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a:hover .uk-card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* MediaAssetDetailView's preview image: fills its fixed-height uk-card-body box without
 * overflowing it or stretching past the source image's own resolution. Static class rather than
 * an inline style="" attribute since this app's CSP is style-src 'self' with no unsafe-inline. */
.media-detail-preview-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
}

/* News unread indicator (FR-10): a small colored dot before an unread message's title, in the
 * News Hub block and the full list alike. */
.news-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--uk-global-primary-background, #1e87f0);
    margin-right: 6px;
}

/* NewsListView's teaser-image thumbnail: fixed small square, cropped to fill. */
.news-list-teaser-thumb {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 4px;
}

.news-list-teaser-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* NewsDetailView's teaser image: a wide hero image above the message body. */
.news-detail-teaser-img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 4px;
}

/* NewsDetailView's threaded comments (FR-15): static per-depth indentation classes, since a
 * dynamic inline style="margin-left:...px" is silently dropped by this app's CSP (style-src
 * 'self', no unsafe-inline) — capped at depth 10, matching NewsDetailView::renderComment(). */
.news-comment-depth-0 { margin-left: 0; }
.news-comment-depth-1 { margin-left: 24px; }
.news-comment-depth-2 { margin-left: 48px; }
.news-comment-depth-3 { margin-left: 72px; }
.news-comment-depth-4 { margin-left: 96px; }
.news-comment-depth-5 { margin-left: 120px; }
.news-comment-depth-6 { margin-left: 144px; }
.news-comment-depth-7 { margin-left: 168px; }
.news-comment-depth-8 { margin-left: 192px; }
.news-comment-depth-9 { margin-left: 216px; }
.news-comment-depth-10 { margin-left: 240px; }

/* IMPL-0020 (Maintenance Mode, FR-11): shown site-wide (UikitTheme::renderLayout()) while browsing
 * with a valid maintenance bypass token, so an operator verifying the site before disengaging
 * doesn't lose track of the fact that it's still formally down for everyone else. The maintenance
 * page itself (MaintenanceMode::RenderMaintenancePage()) is fully self-contained instead — no
 * dependency on this file, deliberately, since it must render even when nothing else can be
 * reached. */
.maintenance-bypass-banner {
    background-color: #fff3cd;
    color: #664d03;
    text-align: center;
    padding: 10px;
    font-weight: bold;
}

/* IMPL-0021 (Maps): MapRenderer's own two fixed sizes (MapSize enum) — a bounded set of static
 * classes rather than an arbitrary per-call inline height, same reasoning as news-comment-depth-N
 * above (this app's CSP has no unsafe-inline allowance for style attributes). */
.map-container-default {
    height: 250px;
    width: 100%;
    margin-bottom: 20px;
}

.map-container-compact {
    height: 150px;
    width: 100%;
    margin-bottom: 20px;
}