/* Carla Skin Clinic - Admin Panel Styles */
/* Adapted from NextJS Admin Dashboard Template */

.admin-body {
  font-family: 'Outfit', sans-serif;
}

.admin-body h1, .admin-body h2, .admin-body h3, .admin-body h4, .admin-body h5, .admin-body h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: normal;
}

/* ===== SIDEBAR ===== */
.sidebar {
  @apply fixed left-0 top-0 z-40 h-screen w-[280px] bg-white border-r border-gray-200 shadow-md;
}

.sidebar-header {
  @apply flex items-center gap-3 px-5 py-5 border-b border-gray-100;
}

.sidebar-logo {
  @apply h-9 w-auto;
}

.sidebar-nav {
  @apply px-4 py-4 space-y-0.5 overflow-y-auto;
  height: calc(100vh - 80px);
}

.sidebar-label {
  @apply px-3 text-[11px] font-bold text-gray-400 uppercase tracking-[0.15em] mb-2 mt-4 first:mt-0;
}

.sidebar-link {
  @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 cursor-pointer;
}

.sidebar-link-active {
  @apply bg-gold/10 text-gold font-semibold;
}

.sidebar-link-inactive {
  @apply text-gray-500 hover:bg-gray-50 hover:text-gray-900;
}

/* ===== HEADER ===== */
.admin-header {
  @apply sticky top-0 z-20 bg-white border-b border-gray-200;
}

.admin-header-inner {
  @apply flex items-center justify-between px-4 md:px-6 py-3;
}

.admin-header-title {
  @apply text-lg font-semibold text-gray-800;
}

/* ===== CARDS ===== */
.admin-card {
  @apply bg-white rounded-xl border border-gray-200 p-5 hover:shadow-md transition-all duration-200;
}

.admin-card-header {
  @apply font-semibold text-gray-800 mb-4 flex items-center gap-2;
}

/* ===== STATS ===== */
.admin-stat-value {
  @apply text-3xl font-bold text-gray-800;
}

.admin-stat-label {
  @apply text-sm font-medium text-gray-700 mt-1;
}

.admin-stat-desc {
  @apply text-xs text-gray-400;
}

/* ===== BUTTONS ===== */
.admin-btn-primary {
  @apply px-4 py-2.5 bg-gold hover:bg-gold-dark text-white text-sm font-semibold rounded-lg transition-all duration-200 flex items-center gap-2 shadow-sm hover:shadow-md;
}

.admin-btn-secondary {
  @apply px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all duration-200;
}

.admin-btn-danger {
  @apply px-3 py-1.5 text-xs border border-red-200 text-red-500 rounded-lg hover:bg-red-50 hover:text-red-600 transition-all duration-200;
}

.admin-btn-edit {
  @apply px-3 py-1.5 text-xs border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 hover:text-gray-800 transition-all duration-200;
}

/* ===== FORM ===== */
.admin-input {
  @apply w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:border-gold focus:ring-2 focus:ring-gold/20 outline-none transition-all duration-200 bg-white;
}

.admin-label {
  @apply block text-sm font-medium text-gray-700 mb-1.5;
}

.admin-textarea {
  @apply w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:border-gold focus:ring-2 focus:ring-gold/20 outline-none transition-all duration-200 min-h-[80px] resize-y bg-white;
}

.admin-select {
  @apply w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:border-gold focus:ring-2 focus:ring-gold/20 outline-none transition-all duration-200 bg-white;
}

/* ===== TABLE ===== */
.admin-table {
  @apply w-full;
}

.admin-table th {
  @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-200;
}

.admin-table td {
  @apply px-4 py-3 text-sm text-gray-600 border-b border-gray-100;
}

.admin-table tr:hover td {
  @apply bg-gray-50;
}

/* ===== FILE INPUT ===== */
.admin-file-input {
  @apply w-full text-sm text-gray-500 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-gold file:text-white hover:file:bg-gold-dark;
}

/* ===== GRID ===== */
.admin-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6;
}

/* ===== AVATAR ===== */
.admin-avatar {
  @apply w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden flex-shrink-0;
}

/* ===== CONTENT ===== */
.admin-content {
  @apply lg:ml-[280px];
}

.admin-main {
  @apply p-4 md:p-6;
}

/* ===== MOBILE ===== */
.admin-overlay {
  @apply fixed inset-0 z-30 bg-black/20 lg:hidden;
}

.admin-hamburger {
  @apply lg:hidden text-gray-500 hover:text-gray-700;
}

.sidebar-transition {
  @apply transition-transform duration-300;
}

.sidebar-open {
  @apply translate-x-0;
}

.sidebar-closed {
  @apply -translate-x-full lg:translate-x-0;
}

/* ===== LOGOUT ===== */
.admin-logout-btn {
  @apply flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition;
}

/* ===== BADGE ===== */
.admin-badge {
  @apply text-xs px-2 py-0.5 rounded-full font-medium;
}