@use 'variables';
// ═══════════════════════════════════════════════
// FERMENTY — Admin panel styles
// ═══════════════════════════════════════════════

.admin-body {
    background: #F0F7E8;
    min-height: 100vh;
}

// ── Navbar ───────────────────────────────────
.admin-navbar {
    background: #1E3A12;
    height: 52px;
    padding: 0 $spacing-xl;

    .admin-navbar-brand {
        color: $green-light;
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: $spacing-sm;

        &:hover { color: #fff; }
    }

    .admin-badge-nav {
        background: $orange-main;
        color: #fff;
        font-size: 9px;
        padding: 2px 8px;
        border-radius: $radius-pill;
        font-weight: $font-weight-bold;
    }

    .admin-navbar-user {
        font-size: $font-size-sm;
        color: $text-hint;
    }

    .admin-navbar-link {
        font-size: $font-size-sm;
        color: $text-hint;
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        font-family: $font-ui;
        padding: 0;

        &:hover { color: $green-light; }
    }
}

// ── Layout ───────────────────────────────────
.admin-wrapper {
    display: flex;
    min-height: calc(100vh - 52px);
}

.admin-sidebar {
    width: 180px;
    background: #F0F7E8;
    border-right: $border-width solid $border-color;
    padding: $spacing-lg 0;
    flex-shrink: 0;
}

.admin-sidenav {
    display: flex;
    flex-direction: column;
}

.admin-nav-item {
    padding: 9px $spacing-lg;
    font-size: $font-size-sm;
    color: #3A5A28;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: $transition-base;

    &:hover {
        background: #E0F0CC;
        color: $text-dark;
    }

    &.active {
        background: #E0F0CC;
        color: $text-dark;
        font-weight: $font-weight-bold;
        border-left-color: $green-mid;
    }
}

.admin-main {
    flex: 1;
    padding: $spacing-xl;
    background: #F8FBF5;
    min-width: 0;
}

// ── Page titles ──────────────────────────────
.admin-page-title {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    color: $text-dark;
    margin-bottom: 4px;
}

.admin-page-sub {
    font-size: $font-size-sm;
    color: $text-muted;
    margin-bottom: $spacing-xl;
}

// ── Cards ────────────────────────────────────
.admin-card {
    background: #fff;
    border: $border-width solid $border-color;
    border-radius: $radius-lg;
    padding: $spacing-lg;

    .admin-card-title {
        font-size: $font-size-base;
        font-weight: $font-weight-bold;
        color: $text-dark;
        margin-bottom: $spacing-md;
    }
}

// ── Stat cards ───────────────────────────────
.admin-stat-card {
    background: #EEF6E4;
    border-radius: $radius-md;
    padding: $spacing-md;

    .admin-stat-label {
        font-size: $font-size-xs;
        color: $text-muted;
        margin-bottom: 4px;
    }

    .admin-stat-value {
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        color: $text-dark;
        line-height: 1;
    }

    .admin-stat-sub {
        font-size: $font-size-xs;
        color: $text-hint;
        margin-top: 4px;
    }
}

// ── Tables ───────────────────────────────────
.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: $font-size-sm;

    th {
        text-align: left;
        padding: 8px $spacing-md;
        font-size: $font-size-xs;
        font-weight: $font-weight-bold;
        color: $text-muted;
        background: #F0F7E8;
        border-bottom: $border-width solid $border-color;
    }

    td {
        padding: 10px $spacing-md;
        border-bottom: $border-width solid #F0F7E8;
        vertical-align: middle;
    }

    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #FAFDF7; }
}

// ── Guide filter pills ────────────────────────
.guide-filter-pill {
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    padding: 4px $spacing-sm;
    border-radius: $radius-pill;
    border: $border-width solid $border-color;
    background: #fff;
    color: $text-muted;
    cursor: pointer;
    transition: $transition-base;
    font-family: $font-ui;
    white-space: nowrap;

    &:hover   { border-color: $green-main; color: $green-main; }
    &.active  { background: $green-main; border-color: $green-main; color: #fff; }
}

.guide-cell-warn { color: $orange-main; font-weight: $font-weight-medium; }
.guide-ok        { color: $green-main; font-size: $font-size-sm; }

.admin-user-name {
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: $text-dark;
}

.admin-user-email {
    font-size: $font-size-xs;
    color: $text-muted;
}

// ── Buttons ──────────────────────────────────
.btn-xs-admin {
    font-size: $font-size-xs;
    padding: 3px $spacing-sm;
    border-radius: $radius-sm;
    border: $border-width solid $border-color;
    background: #fff;
    color: $text-muted;
    text-decoration: none;
    cursor: pointer;
    transition: $transition-base;
    font-family: $font-ui;

    &:hover {
        border-color: $green-mid;
        color: $text-dark;
        background: $green-pale;
    }
}