/* Spartan Admin — utilitarian companion to the public site */
:root{
  --green-900:#0f2a1f;
  --green-800:#1c3d2e;
  --green-700:#2b5440;
  --green-600:#3d6e54;
  --green-500:#5c8a72;
  --green-300:#a7c4b3;
  --green-100:#e6efe9;
  --green-50:#f3f7f4;
  --ivory:#faf8f3;
  --white:#ffffff;
  --ink:#13201a;
  --ink-soft:#3a4a41;
  --muted:#7c8a82;
  --line:rgba(28,61,46,0.12);
  --line-strong:rgba(28,61,46,0.22);
  --danger:#a83232;
  --danger-bg:#fdecea;
  --shadow-sm:0 4px 14px -8px rgba(15,42,31,.18);
  --shadow-md:0 18px 40px -22px rgba(15,42,31,.35);
  --sans:'Inter','Helvetica Neue',system-ui,-apple-system,sans-serif;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--green-50);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ====== AUTH PAGES (login + setup) ====== */
.auth-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--green-50), var(--green-100));
  padding:2rem 1rem;
}
.auth-card{
  background:var(--white);
  border-radius:8px;
  padding:3rem 2.5rem;
  width:min(440px, 100%);
  box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.auth-logo{
  width:56px;height:56px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:1.5rem;
  background:var(--green-800);
  box-shadow:0 0 0 1px var(--line-strong) inset;
}
.auth-logo img{width:100%;height:100%;object-fit:cover}
.auth-card h1{
  font-family:var(--serif);
  font-size:1.85rem;
  font-weight:500;
  color:var(--green-900);
  margin-bottom:.4rem;
}
.auth-card .muted{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:2rem;
}
.back-link{margin-top:1.5rem;font-size:.85rem;color:var(--muted)}
.back-link a:hover{color:var(--green-700)}

/* ====== FIELDS ====== */
.field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1.1rem;
  flex:1;
  min-width:0;
}
.field > span{
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="number"],
.field input[type="file"],
.field textarea,
.field select{
  width:100%;
  padding:.75rem .85rem;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--white);
  font-family:inherit;
  font-size:.95rem;
  color:var(--ink);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;
  border-color:var(--green-700);
  box-shadow:0 0 0 3px rgba(43,84,64,.1);
}
.field textarea{resize:vertical;min-height:84px;line-height:1.55}
.field input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:var(--green-700);
  margin-top:.2rem;
}
.field .hint{color:var(--muted);font-size:.78rem}
.field-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:flex-start;
}
.field-row .field{flex:1;min-width:140px}

/* ====== BUTTONS ====== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.4rem;
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--green-800);color:var(--ivory)}
.btn-primary:hover{background:var(--green-900);transform:translateY(-1px)}
.btn-mini{padding:.4rem .8rem;font-size:.7rem;letter-spacing:.1em;border-radius:4px;background:var(--green-100);color:var(--green-900)}
.btn-mini:hover{background:var(--green-300)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{background:#f6c8c2}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ====== ALERTS ====== */
.alert{
  padding:.85rem 1rem;
  border-radius:5px;
  font-size:.9rem;
  margin-bottom:1.2rem;
}
.alert-error{background:var(--danger-bg);color:var(--danger);border:1px solid #f4c1bc}
.alert-success{background:var(--green-100);color:var(--green-900);border:1px solid var(--green-300)}

/* ====== APP LAYOUT ====== */
body:has(.sidebar){
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--green-900);
  color:var(--ivory);
  padding:2rem 1.25rem;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:2rem;
  padding:0 .5rem;
}
.sidebar-brand img{
  width:38px;height:38px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(250,248,243,.15);
}
.sb-name{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:500;
  display:block;
  line-height:1;
}
.sb-tag{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:rgba(250,248,243,.55);
  display:block;
  margin-top:2px;
}
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  margin-bottom:auto;
}
.nav-item{
  padding:.75rem 1rem;
  border-radius:5px;
  font-size:.85rem;
  color:rgba(250,248,243,.75);
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav-item:hover{color:var(--ivory);background:rgba(250,248,243,.06)}
.nav-item.active{background:var(--green-700);color:var(--ivory)}
.sidebar-footer{
  padding-top:1.5rem;
  margin-top:1.5rem;
  border-top:1px solid rgba(250,248,243,.1);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-size:.8rem;
}
.sidebar-footer .user{color:rgba(250,248,243,.7)}
.sidebar-footer .link{
  color:var(--green-300);
  padding:.4rem 0;
}
.sidebar-footer .link:hover{color:var(--ivory)}
.sidebar-footer .link.danger{color:#e8a8a3}
.sidebar-footer .link.danger:hover{color:#fff}

/* ====== CONTENT ====== */
.content{
  padding:3rem;
  max-width:1100px;
}
.tab{display:none}
.tab.active{display:block;animation:fadeIn .35s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.content h1{
  font-family:var(--serif);
  font-size:2.2rem;
  font-weight:500;
  color:var(--green-900);
  margin-bottom:.4rem;
}
.content > .tab > p.muted{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:2rem;
  max-width:60ch;
}
.content h3{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:500;
  color:var(--green-900);
  margin-bottom:1rem;
}
.content h4{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--green-800);
  margin-bottom:1rem;
}

/* ====== PANELS / FORMS ====== */
.panel-form{
  background:var(--white);
  padding:2rem;
  border-radius:6px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  margin-bottom:1.5rem;
}
.tile-form h3{margin-top:0}
.card{
  background:var(--green-50);
  padding:1.5rem;
  border-radius:5px;
  border:1px solid var(--line);
  margin-bottom:1.2rem;
}
.card h4{margin-bottom:1rem}

/* ====== UPLOAD CARD ====== */
.upload-card{
  background:var(--white);
  padding:2rem;
  border-radius:6px;
  border:1px dashed var(--green-300);
  margin-bottom:2rem;
}
.upload-card h3{margin-bottom:1rem}

/* ====== GALLERY ADMIN GRID ====== */
.gallery-admin{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.2rem;
}
.ga-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ga-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ga-card.dragging{opacity:.4}
.ga-card.drop-target{outline:2px dashed var(--green-700);outline-offset:-2px}
.ga-thumb{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--green-900);
  cursor:grab;
  position:relative;
}
.ga-thumb:active{cursor:grabbing}
.ga-thumb::after{
  content:"⠿";
  position:absolute;
  top:8px;right:10px;
  color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.4);
  width:26px;height:26px;
  border-radius:4px;
  display:grid;
  place-items:center;
  font-size:.9rem;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s var(--ease);
}
.ga-thumb:hover::after{opacity:1}
.ga-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ga-meta{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.ga-meta input[type="text"],
.ga-meta input:not([type]),
.ga-meta select{
  padding:.5rem .65rem;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:.85rem;
  background:var(--white);
  width:100%;
}
.ga-meta input:focus,.ga-meta select:focus{outline:none;border-color:var(--green-700)}
.ga-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.ga-cat{flex:1;min-width:90px}
.ga-tall{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.ga-tall input{accent-color:var(--green-700)}

/* ====== TOAST ====== */
.toast-stack{
  position:fixed;
  top:1.5rem;
  right:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  z-index:1000;
  pointer-events:none;
}
.toast{
  background:var(--green-900);
  color:var(--ivory);
  padding:.8rem 1.2rem;
  border-radius:5px;
  font-size:.85rem;
  box-shadow:var(--shadow-md);
  animation:toastIn .35s var(--ease);
  max-width:340px;
  pointer-events:auto;
}
.toast.error{background:var(--danger);color:#fff}
.toast.success{background:var(--green-700)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ====== RESPONSIVE ====== */
@media (max-width: 880px){
  body:has(.sidebar){grid-template-columns:1fr}
  .sidebar{
    position:static;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    gap:.5rem;
    padding:1rem;
  }
  .sidebar-brand{margin-bottom:0;width:100%}
  .sidebar-nav{flex-direction:row;flex-wrap:wrap;width:100%;margin-bottom:0}
  .sidebar-footer{flex-direction:row;width:100%;border-top:none;padding-top:0;margin-top:.5rem;gap:1rem;align-items:center}
  .content{padding:1.5rem}
  .content h1{font-size:1.6rem}
  .panel-form{padding:1.25rem}
  .field-row{flex-direction:column;gap:0}
}