/* ====================================================================
   DACHSHUND RESCUE NETWORK — ADMIN BACKEND STYLESHEET
   The public site stays black/white/editorial; the admin tool uses
   the literal brand colors from the DRN logo (navy/gold/teal) so
   staff get clear visual wayfinding in an internal tool.
   ==================================================================== */

:root{
  --navy:        #1B3A53;
  --navy-deep:    #122838;
  --navy-light:   #2C5570;
  --gold:        #C9A227;
  --gold-light:   #E4C766;
  --teal:        #7FB6B0;
  --cream:       #F5F8F9;
  --paper:       #FFFFFF;
  --hairline:    #DCE3E8;
  --slate:       #3A3835;
  --mute:        #8C99A3;
  --danger:      #B23A3A;
  --success:     #2F7D5C;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; overflow-x:hidden; }
body{
  background:var(--cream);
  color:var(--navy-deep);
  font-family:'Inter',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  width:100%;
}
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button, input, select, textarea{ font-family:inherit; }
h1,h2,h3,p{ margin:0; }
.font-display{ font-family:'Fraunces',Georgia,serif; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- Login screen ---------- */
.login-shell{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep);
  background-image: radial-gradient(circle at 20% 20%, rgba(201,162,39,.08), transparent 45%),
                     radial-gradient(circle at 80% 80%, rgba(127,182,176,.10), transparent 45%);
  padding:24px;
}
.login-card{
  background:var(--paper);
  width:100%; max-width:380px;
  padding:2.75rem 2.25rem;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
@media (max-width:360px){
  .login-card{ padding:2.25rem 1.5rem; }
}
.login-logo{ width:56px; height:56px; border-radius:50%; display:block; margin:0 auto 1.5rem; object-fit:cover; border:2px solid var(--gold); }
.login-card h1{ font-size:1.5rem; text-align:center; margin-bottom:.4rem; }
.login-card .sub{ text-align:center; color:var(--mute); font-size:.85rem; margin-bottom:2rem; }
.login-error{
  background:#FBEAEA; color:var(--danger); border:1px solid #F1C9C9;
  font-size:.85rem; padding:.75rem 1rem; margin-bottom:1.25rem;
}
.login-hint{ margin-top:1.5rem; font-size:.75rem; color:var(--mute); text-align:center; line-height:1.6; }

/* ---------- Shell layout: sidebar + topbar + main ---------- */
.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width:240px; flex:none;
  background:var(--navy-deep);
  color:rgba(255,255,255,.85);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0;
  z-index:40;
  transform:translateX(-100%);
  transition:transform .35s var(--ease);
}
.admin-sidebar.open{ transform:translateX(0); }
@media (min-width:960px){
  .admin-sidebar{ transform:translateX(0); position:sticky; }
}

.sidebar-brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1.5rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; border:1.5px solid var(--gold); }
.sidebar-brand .name{ font-family:'Fraunces',serif; font-size:1rem; line-height:1.2; color:#fff; }
.sidebar-brand .tag{ font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); }

.sidebar-nav{ flex:1; padding:1.25rem .75rem; }
.sidebar-nav a{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .9rem; margin-bottom:.15rem;
  font-size:.88rem; color:rgba(255,255,255,.7);
  border-radius:3px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{ background:rgba(201,162,39,.14); color:var(--gold-light); }
.sidebar-nav a svg{ flex:none; opacity:.85; }
.sidebar-nav .nav-section{
  font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.35); padding:1.1rem .9rem .4rem;
}

.sidebar-footer{ padding:1.1rem 1.4rem; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer a{ font-size:.82rem; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:.5rem; }
.sidebar-footer a:hover{ color:#fff; }
.sidebar-footer .view-site{ display:block; font-size:.78rem; color:var(--teal); margin-bottom:.6rem; }

.admin-main{ flex:1; min-width:0; }

.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1.1rem 1.25rem;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  position:sticky; top:0; z-index:30;
}
.topbar-title{
  font-family:'Fraunces',serif; font-size:1.25rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.topbar-right{ display:flex; align-items:center; gap:1rem; flex:none; }
.topbar-user{ font-size:.82rem; color:var(--slate); white-space:nowrap; }
@media (max-width:480px){
  .topbar-user{ display:none; }
}
.sidebar-toggle{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--hairline); background:none; flex:none;
}
@media (min-width:960px){ .sidebar-toggle{ display:none; } }

.admin-content{ padding:1.75rem 1.5rem 3rem; max-width:1280px; }

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35;
}
.sidebar-overlay.show{ display:block; }
@media (min-width:960px){ .sidebar-overlay{ display:none !important; } }

/* ---------- Cards / stats ---------- */
.stat-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
@media (min-width:720px){ .stat-cards{ grid-template-columns:repeat(4,1fr); } }
.stat-card{
  background:var(--paper); border:1px solid var(--hairline);
  padding:1.25rem 1.4rem;
}
.stat-card .num{ font-family:'Fraunces',serif; font-size:2.1rem; color:var(--navy); }
.stat-card .label{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-top:.35rem; }
.stat-card.accent{ border-color:var(--gold); }
.stat-card.accent .num{ color:var(--gold); }

.panel{ background:var(--paper); border:1px solid var(--hairline); margin-bottom:2rem; }
.panel-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:1.25rem 1.4rem; border-bottom:1px solid var(--hairline);
}
.panel-head h2{ font-family:'Fraunces',serif; font-size:1.2rem; }
.panel-body{ padding:1.4rem; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; }
table.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.admin-table th{
  text-align:left; padding:.85rem 1.1rem;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
  border-bottom:1px solid var(--hairline); white-space:nowrap;
}
table.admin-table td{
  padding:.95rem 1.1rem; border-bottom:1px solid var(--hairline); vertical-align:middle;
}
table.admin-table tr:last-child td{ border-bottom:none; }
table.admin-table tr:hover td{ background:#FBFAF7; }
.cell-strong{ font-weight:600; color:var(--navy-deep); }
.cell-muted{ color:var(--mute); font-size:.82rem; }

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; letter-spacing:.04em; font-weight:600;
  padding:.3rem .65rem; border-radius:20px;
  text-transform:uppercase;
}
.badge-new{ background:#E9F1FB; color:#2A5C99; }
.badge-reviewed{ background:#F2EFE4; color:var(--gold); }
.badge-approved{ background:#E7F3EC; color:var(--success); }
.badge-rejected{ background:#FBEAEA; color:var(--danger); }
.badge-available{ background:#E7F3EC; color:var(--success); }
.badge-pending{ background:#F2EFE4; color:#9C7E1F; }
.badge-adopted{ background:#EDEAF6; color:#5B4B9A; }

/* ---------- Buttons / forms (admin-scoped) ---------- */
.a-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.83rem; padding:.65rem 1.2rem;
  border:1px solid var(--navy); background:var(--navy); color:#fff;
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  cursor:pointer;
}
.a-btn:hover{ background:var(--navy-light); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(27,58,83,.5); }
.a-btn-outline{ background:transparent; color:var(--navy); }
.a-btn-outline:hover{ background:var(--navy); color:#fff; }
.a-btn-gold{ background:var(--gold); border-color:var(--gold); color:#241D04; }
.a-btn-gold:hover{ background:var(--gold-light); }
.a-btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.a-btn-danger:hover{ background:var(--danger); color:#fff; }
.a-btn-sm{ padding:.4rem .8rem; font-size:.76rem; }
.a-btn[disabled]{ opacity:.4; pointer-events:none; }

.a-field-label{
  display:block; margin-bottom:.4rem; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; color:var(--slate);
}
.a-field-input{
  width:100%; border:1px solid var(--hairline); padding:.65rem .85rem;
  font-size:.9rem; background:#fff; transition:border-color .3s var(--ease);
}
.a-field-input:focus{ border-color:var(--navy); }
.a-field-hint{ font-size:.76rem; color:var(--mute); margin-top:.4rem; }
.a-form-grid{ display:grid; gap:1.25rem; max-width:640px; }
.a-form-row-2{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:560px){ .a-form-row-2{ grid-template-columns:1fr 1fr; } }

.photo-row{ display:flex; gap:.6rem; margin-bottom:.6rem; align-items:center; }
.photo-row .a-field-input{ flex:1; }
.photo-thumb{
  width:44px; height:44px; flex:none; object-fit:cover;
  border:1px solid var(--hairline); border-radius:3px; background:var(--cream);
}
.photo-upload-previews{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.photo-upload-previews .photo-thumb{ width:64px; height:64px; }
.remove-photo{
  width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); background:#fff; color:var(--danger); cursor:pointer;
}
.remove-photo:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }

.flash{
  padding:.9rem 1.2rem; margin-bottom:1.5rem; font-size:.88rem;
}
.flash-success{ background:#E7F3EC; color:var(--success); border:1px solid #CFE7DA; }
.flash-error{ background:#FBEAEA; color:var(--danger); border:1px solid #F1C9C9; }

.detail-grid{ display:grid; gap:1.5rem; }
@media (min-width:760px){ .detail-grid{ grid-template-columns:2fr 1fr; } }
.detail-row{ padding:.85rem 0; border-bottom:1px solid var(--hairline); }
.detail-row:last-child{ border-bottom:none; }
.detail-row .k{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:.3rem; }
.detail-row .v{ font-size:.94rem; color:var(--navy-deep); white-space:pre-wrap; line-height:1.6; }

.empty-state{ text-align:center; padding:3rem 1rem; color:var(--mute); font-size:.9rem; }

.filter-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filter-tab{
  font-size:.78rem; padding:.4rem .85rem; border:1px solid var(--hairline);
  color:var(--slate); background:#fff;
}
.filter-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

.puppy-thumb{ width:48px; height:48px; object-fit:cover; border-radius:4px; flex:none; }
.puppy-cell{ display:flex; align-items:center; gap:.75rem; }