/*
 * Farmart paneli: Metronic marka renkleri (sitedeki src/Farmart.Web/wwwroot/css/site.css ile aynı).
 * Primary = logo amberi (#ffb000); beyaz üstünde okunmadığı için düğmelerde koyu yazı,
 * metin düzeyinde (.text-primary, linkler, aktif menü) daha koyu --primary-strong kullanılır.
 */
:root {
    --primary: #ffb000;
    --primary-foreground: oklch(21% 0.006 285.885);   /* zinc-900 */
    --primary-strong: oklch(55.5% 0.163 48.998);      /* amber-700 */
}

.dark {
    --primary: #ffb000;
    --primary-foreground: oklch(21% 0.006 285.885);
    --primary-strong: oklch(87.9% 0.169 91.605);      /* amber-300 */
}

.text-primary,
.kt-link {
    color: var(--primary-strong);
}

/* Kenar çubuğunda seçili menü: amber yazı okunmaz, koyu tonu. */
.kt-menu-item.active > .kt-menu-link .kt-menu-title,
.kt-menu-item.active > .kt-menu-link .kt-menu-icon,
.kt-menu-item.here > .kt-menu-link .kt-menu-title,
.kt-menu-item.here > .kt-menu-link .kt-menu-icon {
    color: var(--primary-strong);
}

@media (hover: hover) {
    .hover\:text-primary:hover {
        color: var(--primary-strong);
    }
}

/* Giriş sayfasının marka alanı: logo amberinden yumuşak bir geçiş. */
.branded-bg {
    background:
        radial-gradient(circle at 85% 15%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 55%),
        var(--muted);
}

/* Kategori görselleri: listede kare küçük resim, formda sınırlı yükseklikte önizleme. */
.category-thumb { object-fit: cover; }
.category-preview { max-height: 180px; object-fit: cover; }

/* Ürün galerisi: kare kutular, sürüklenen fotoğraf soluk. */
.gallery-image { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Sayfa başlığı + düğmeler (Kaydet): sabit üst başlığın hemen altında yapışık kalır. */
.page-toolbar {
    position: sticky;
    top: var(--header-height, 70px);
    z-index: 9;
    background-color: var(--background);
}

.page-toolbar > div {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.page-toolbar.is-stuck {
    border-bottom: 1px solid var(--border);
}

/* ---- Gösterge paneli: sunucuda çizilen SVG çubuk grafik ve yatay pay çubukları. ---- */
.dashboard-chart {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
}

.dashboard-chart.hidden { display: none; }
.dashboard-grid { stroke: var(--border); stroke-width: 1; }
.dashboard-axis { fill: var(--secondary-foreground); font-size: 11px; }
.dashboard-bar { fill: var(--primary); }
.dashboard-hit { fill: transparent; }
.dashboard-day:hover .dashboard-hit { fill: var(--muted); }
.dashboard-day:hover .dashboard-bar { fill: var(--primary-strong); }

.dashboard-track {
    height: 0.375rem;
    border-radius: 9999px;
    background-color: var(--muted);
    overflow: hidden;
}

.dashboard-fill {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--primary);
}

/* ---- Hazır Metronic CSS'inde olmayan sınıflar (styles.css yalnızca demo sayfalarındaki sınıfları içerir). ---- */
@layer utilities {
    .border-destructive\/30 { border-color: color-mix(in oklab, var(--destructive) 30%, transparent); }
    .opacity-50 { opacity: 0.5; }
    .w-64 { width: calc(var(--spacing) * 64); }
    .bottom-1 { bottom: calc(var(--spacing) * 1); }
    .top-1 { top: calc(var(--spacing) * 1); }
    .end-1 { inset-inline-end: calc(var(--spacing) * 1); }
    .p-6 { padding: calc(var(--spacing) * 6); }
    .text-warning { color: var(--color-amber-600, #d97706); }
    .cursor-grab { cursor: grab; }
    .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .last\:border-b-0:last-child { border-bottom-width: 0; }
    .last\:pb-0:last-child { padding-bottom: 0; }
    @media (hover: hover) {
        .hover\:bg-muted:hover { background-color: var(--muted); }
    }
    .scroll-mt-24 { scroll-margin-top: calc(var(--spacing) * 24); }
}

/* ---- Ana sayfa vitrini ---- */
.showcase-preview { min-height: 160px; }
.showcase-preview img { max-height: 220px; object-fit: contain; }

/* Sunucu sayfası: kutular kartın yüksekliğine uzamaz; doluluk çubuğu %70'te uyarı, %90'da tehlike renginde. */
.server-tiles {
    align-content: start;
}

.server-fill {
    transition: width 0.4s ease;
}

.server-fill-warning {
    background-color: var(--color-yellow-500);
}

.server-fill-danger {
    background-color: var(--destructive);
}