/* ── SheepManager App CSS ── */

:root {
    --sh-green-dark: #2D5016;
    --sh-green-mid: #4A7C2E;
    --sh-green-light: #7CB342;
    --sh-brown: #8B6914;
    --sh-font: 'DM Sans', sans-serif;
}

* { font-family: var(--sh-font) !important; }

body {
    /* Ueber die Theme-Palette, damit der Dunkelmodus den Seitenhintergrund
       mitzieht - im Hellmodus liefert sie dasselbe Creme wie bisher. */
    background: var(--mud-palette-background);
    margin: 0;
}

/* MudBlazor overrides */
.mud-appbar.mud-appbar-fixed-top {
    background: linear-gradient(135deg, var(--sh-green-dark), var(--sh-green-mid)) !important;
}

.mud-drawer {
    background: var(--sh-green-dark) !important;
}

.mud-nav-item .mud-nav-link {
    color: rgba(255,255,255,0.75) !important;
    border-radius: 8px;
    margin: 2px 8px;
    transition: all 0.2s;
}

.mud-nav-item .mud-nav-link:hover,
.mud-nav-item .mud-nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}

.mud-nav-link .mud-nav-link-icon {
    color: rgba(255,255,255,0.6) !important;
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--sh-green-light) !important;
}

/* Dashboard cards */
.dash-card {
    border-radius: 16px !important;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* Sheep list */
.sheep-row {
    cursor: pointer;
    transition: background 0.15s;
}

.sheep-row:hover {
    background: var(--mud-palette-table-hover) !important;
}

.sheep-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.sheep-avatar.female { background: var(--sh-green-mid); }
.sheep-avatar.male { background: var(--sh-brown); }

/* Rating chips / badges */
.badge-good { background: #CCE5CC; color: #006600; }
.badge-mid { background: #FFF2CC; color: #996600; }
.badge-bad { background: #FFCCCC; color: #CC0000; }

/* Mobile optimizations */
@media (max-width: 600px) {
    .stat-value { font-size: 1.8rem; }
    .mud-table-cell { padding: 8px 6px !important; }
    .page-title { font-size: 1.4rem !important; }
}

/* Mobile bottom navigation (< Md breakpoint, matches MudBlazor's 960px) */
@media (max-width: 959.98px) {
    .mud-main-content { padding-bottom: 76px; }
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
}

/* Im Karten-Layout kleiner Geraete wird jede Tabellenzelle zu einer eigenen Zeile mit
   Beschriftung. Eine Zelle ohne Wert erscheint dort als leere Zeile, die nur Platz kostet.
   Die Regel gilt bewusst nur unterhalb des Breakpoints, oberhalb wuerden sonst Spalten
   verrutschen. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-cell:empty {
        display: none;
    }
}

/* Titel in der App-Bar: neben den Aktionsknoepfen bleibt auf dem Handy so wenig
   Platz, dass "SheepManager" sonst unter das Schaf-Symbol umbricht. */
.app-title {
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

@media (max-width: 599.98px) {
    .app-title {
        font-size: 1.05rem;
    }
}

/* Unterhalb von Md liegt die fixe Bottom-Nav ueber dem Inhalt - der MainContent
   braucht darunter Platz, damit die letzte Karte nicht verdeckt wird. */
.main-content {
    padding-bottom: 16px;
}

@media (max-width: 959.98px) {
    .main-content {
        padding-bottom: 88px;
    }
}

.mobile-bottom-nav-item {
    min-width: 0;
    flex: 1 1 0;
}

/* Status chips */
.status-aktiv { background: #C8E6C9 !important; color: #2E7D32 !important; }
.status-abgegangen { background: #E0E0E0 !important; color: #616161 !important; }
.status-verstorben { background: #FFCDD2 !important; color: #C62828 !important; }
.status-verkauft { background: #FFE0B2 !important; color: #E65100 !important; }
.status-geschlachtet { background: #D7CCC8 !important; color: #4E342E !important; }

/* Page header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin: 0;
}

/* ── Admin stat cards ── */
.admin-stat-card {
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 12px !important;
}