/* Goat Hub — image admin panel styles */

.admin-main{ padding: 56px 0 90px; min-height: calc(100vh - 90px); }

.row{ display:flex; align-items:center; }

.admin-tabs{ display:flex; gap:8px; margin-bottom:28px; border-bottom: 1px solid var(--line); }
.admin-tab{
  border:none; background:none; cursor:pointer; padding: 12px 6px; margin-right:22px;
  font-weight:700; font-size:1rem; color: var(--ink-soft); position:relative;
}
.admin-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: transparent;
}
.admin-tab.active{ color: var(--forest-dark); }
.admin-tab.active::after{ background: var(--terracotta); }
.admin-tab-panel{ padding-top: 8px; }

.admin-editor-card{
  background:#fff; border-radius: var(--radius-md); border:1px solid var(--line);
  box-shadow: var(--shadow-sm); padding: 26px 28px; margin: 20px 0 32px;
}
.admin-editor-card h3{ margin-top:0; }

.admin-table-wrap{ overflow-x:auto; margin-top:20px; }
.admin-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); }
.admin-table th, .admin-table td{ padding: 14px 16px; text-align:left; border-bottom: 1px solid var(--line); font-size:.9rem; }
.admin-table th{ background: var(--cream-dark); font-weight:700; color: var(--forest-dark); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table .row-actions{ display:flex; gap:8px; }
.admin-table .inactive-badge{ font-size:.72rem; font-weight:700; color: var(--terracotta-dark); background:#fbe9e2; padding:3px 9px; border-radius:50px; }
.admin-table .active-badge{ font-size:.72rem; font-weight:700; color: var(--forest); background: var(--cream-dark); padding:3px 9px; border-radius:50px; }

.order-card select.order-status-select{
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 6px 10px;
  font-family: var(--font-body); font-size:.85rem; background:#fff; color: var(--ink);
}

.admin-login{ display:flex; justify-content:center; padding-top: 40px; }
.admin-login-card{
  max-width: 420px; width:100%;
  background:#fff; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 40px 36px;
  text-align:center;
}
.admin-login-card h1{ font-size:1.6rem; }
.admin-login-card form{ text-align:left; margin-top: 24px; }

.admin-error{
  color: var(--terracotta-dark);
  background: #fbe9e2;
  border: 1px solid #f0c6b3;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .88rem;
  font-weight: 600;
  margin-top: 14px;
}

.admin-banner{
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 24px;
}
.admin-banner.success{ background: #e4f0e8; color: var(--forest-dark); border: 1px solid #bcdcc6; }
.admin-banner.error{ background: #fbe9e2; color: var(--terracotta-dark); border: 1px solid #f0c6b3; }

.admin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.admin-card{
  background:#fff; border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display:flex; flex-direction:column; gap: 12px;
}
.admin-card .thumb{
  width:100%; aspect-ratio: 4/3; border-radius: var(--radius-sm);
  background: var(--cream-dark);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.admin-card .thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.admin-card h3{ font-size: .98rem; margin: 0; }
.admin-card .cat{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color: var(--terracotta);
}
.admin-card .custom-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:700; color: var(--forest);
  background: var(--cream-dark); padding:3px 9px; border-radius: 50px;
  width: fit-content;
}
.admin-card .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.admin-card input[type="file"]{
  font-size:.78rem; max-width:100%;
}
.admin-card .card-actions{ display:flex; gap:8px; margin-top:auto; }
.admin-card .card-actions .btn{ flex:1; }
.admin-card .card-msg{ font-size:.78rem; font-weight:600; min-height: 1.1em; }
.admin-card .card-msg.error{ color: var(--terracotta-dark); }
.admin-card .card-msg.success{ color: var(--forest); }
.admin-card.busy{ opacity:.6; pointer-events:none; }

@media (max-width: 480px){
  .admin-login-card{ padding: 30px 22px; }
}