/* =========================================================
   AUGUST & OAK — admin.css
   Back-office UI. Reuses tokens/fonts from styles.css.
   ========================================================= */

.admin-body{ background: var(--ivory-dim); }

/* =========================================================
   Login screen
   ========================================================= */
.login-screen{
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background: var(--ink);
  padding: 24px;
}
.login-screen[hidden]{ display: none; }
.login-card{
  width: 100%; max-width: 380px;
  background: var(--ivory);
  border-radius: var(--radius);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.login-logo{ align-self: center; margin-bottom: 18px; }
.login-eyebrow{
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
  font-weight: 700; text-align: center; margin: 0 0 4px;
}
.login-card h1{ text-align: center; font-size: 1.7rem; margin-bottom: 6px; }
.login-hint{
  text-align: center; font-size: .82rem; color: var(--stone-dark);
  margin: 0 0 22px;
}
.login-card label{ font-size: .78rem; font-weight: 700; margin: 10px 0 6px; letter-spacing: .02em; }
.login-card input{
  padding: 12px 14px; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  font-size: .95rem; outline: none; background: #fff;
}
.login-card input:focus{ border-color: var(--brass); }
.login-error{ color: #a13a3a; font-size: .82rem; min-height: 1.2em; margin: 8px 0 0; }
.login-card .btn{ margin-top: 18px; }
.login-back{
  text-align: center; margin-top: 16px; font-size: .82rem; color: var(--stone-dark);
  text-decoration: underline;
}
.login-disclaimer{
  max-width: 380px; text-align: center; color: var(--stone); font-size: .76rem; line-height: 1.5;
}

/* =========================================================
   Shell layout
   ========================================================= */
.admin-shell{
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-shell[hidden]{ display: none; }

.admin-sidebar{
  background: var(--ink);
  color: var(--ivory);
  padding: 28px 20px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.admin-logo{ font-size: 1.15rem; margin-bottom: 32px; }
.admin-nav{ display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav-link{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius);
  font-size: .88rem; font-weight: 600; color: var(--stone);
  text-align: left;
  transition: background .2s, color .2s;
}
.admin-nav-link svg{ flex-shrink: 0; opacity: .85; }
.admin-nav-link:hover{ background: rgba(243,238,230,.06); color: var(--ivory); }
.admin-nav-link.is-active{ background: rgba(184,147,95,.16); color: var(--brass-light); }
.admin-view-store{
  font-size: .8rem; color: var(--stone); padding: 12px; border-top: 1px solid var(--line-on-dark);
  margin-top: 12px;
}
.admin-view-store:hover{ color: var(--brass-light); }
.admin-logout{
  margin-top: 8px; text-align: left; padding: 12px; font-size: .82rem; font-weight: 700;
  color: var(--ivory); border: 1px solid var(--line-on-dark); border-radius: var(--radius);
}
.admin-logout:hover{ border-color: var(--brass); color: var(--brass-light); }

.admin-main{ padding: 0 32px 64px; max-width: 1180px; }
.admin-topbar{
  display: flex; align-items: center; gap: 16px;
  padding: 28px 0 22px;
  position: sticky; top: 0; background: var(--ivory-dim);
  z-index: 10;
}
.admin-topbar h1{ font-size: 1.5rem; margin: 0; }
.admin-user-pill{
  margin-left: auto; font-size: .8rem; color: var(--stone-dark);
  background: #fff; border: 1px solid var(--line-on-light); padding: 8px 14px; border-radius: 100px;
}
.admin-mobile-toggle{ display: none; }

.admin-toast{
  position: fixed; top: 20px; right: 20px; z-index: 400;
  background: var(--ink); color: var(--ivory);
  padding: 12px 18px; border-radius: var(--radius);
  font-size: .85rem; font-weight: 600;
  transform: translateY(-16px); opacity: 0; pointer-events: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.admin-toast.is-visible{ transform: translateY(0); opacity: 1; }

.admin-view{ display: none; }
.admin-view.is-active{ display: block; animation: fadeUp .3s var(--ease); }
@keyframes fadeUp{ from{ opacity: 0; transform: translateY(6px);} to{ opacity: 1; transform: translateY(0);} }

/* =========================================================
   Cards / panels / tables — shared admin primitives
   ========================================================= */
.stat-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 28px;
}
.stat-card{
  background: #fff; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px;
}
.stat-label{ font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-dark); font-weight: 700; }
.stat-value{ font-family: var(--font-display); font-size: 2rem; color: var(--walnut); }
.stat-note{ font-size: .78rem; color: var(--stone-dark); }

.dash-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }

.panel{
  background: #fff; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  padding: 22px 24px;
}
.panel-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h2{ font-size: 1.05rem; margin: 0; font-family: var(--font-body); font-weight: 700; }
.link-btn{ font-size: .8rem; font-weight: 700; color: var(--brass); text-decoration: underline; }

.admin-table{ width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th{
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--stone-dark); font-weight: 700; padding: 0 10px 10px; border-bottom: 1px solid var(--line-on-light);
}
.admin-table td{ padding: 12px 10px; border-bottom: 1px solid var(--line-on-light); vertical-align: middle; }
.admin-table tr:last-child td{ border-bottom: none; }
.admin-table img.thumb{ width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); }

.status-badge{
  display: inline-block; padding: 4px 10px; border-radius: 100px; font-size: .72rem; font-weight: 700;
  text-transform: capitalize;
}
.status-processing{ background: #FBE8CF; color: #8a5a12; }
.status-shipped{ background: #DCE6F5; color: #2a4d8f; }
.status-delivered{ background: #DCEFE0; color: #256a3a; }
.status-cancelled{ background: #F5DCDC; color: #9a2f2f; }

.status-select{
  border: 1px solid var(--line-on-light); border-radius: 100px; padding: 5px 10px;
  font-size: .78rem; font-weight: 700; background: #fff;
}

.watch-list{ display: flex; flex-direction: column; gap: 12px; }
.watch-list li{
  display: flex; justify-content: space-between; align-items: center;
  font-size: .88rem; padding-bottom: 12px; border-bottom: 1px solid var(--line-on-light);
}
.watch-list li:last-child{ border-bottom: none; padding-bottom: 0; }
.watch-list .stock-pill{
  font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 100px;
  background: #F5DCDC; color: #9a2f2f;
}
.table-empty{ color: var(--stone-dark); text-align: center; padding: 24px 0 4px; font-size: .9rem; }

/* =========================================================
   Toolbars / inputs
   ========================================================= */
.view-toolbar{ display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.view-intro{ color: var(--stone-dark); margin-bottom: 24px; max-width: 62ch; }
.admin-input{
  padding: 11px 14px; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  font-size: .88rem; background: #fff; outline: none;
}
.admin-input:focus{ border-color: var(--brass); }
.admin-input--search{ flex: 1; min-width: 200px; }

.icon-action{
  width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--line-on-light);
}
.icon-action:hover{ border-color: var(--brass); color: var(--brass); }
.row-actions{ display: flex; gap: 6px; }

/* =========================================================
   Materials admin
   ========================================================= */
.material-admin-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px;
}
.material-admin-card{
  background: #fff; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  padding: 22px;
}
.material-admin-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.material-admin-swatch{ width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-on-light); flex-shrink: 0; }
.material-admin-head h3{ margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.material-admin-card .form-row{ margin-bottom: 12px; }
.material-admin-card label{ display: block; font-size: .74rem; font-weight: 700; color: var(--stone-dark); margin-bottom: 5px; }
.material-admin-card textarea{
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-on-light); border-radius: var(--radius);
  font: inherit; font-size: .86rem; resize: vertical; min-height: 64px;
}
.color-row{ display: flex; align-items: center; gap: 10px; }
.color-row input[type="color"]{ width: 40px; height: 36px; border: none; padding: 0; background: none; }
.material-save{ margin-top: 6px; }

/* =========================================================
   Settings
   ========================================================= */
.settings-form{ max-width: 520px; margin-bottom: 24px; }
.form-row{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label{ font-size: .78rem; font-weight: 700; }
.form-row--split{ flex-direction: row; gap: 16px; }
.form-row--split > div{ flex: 1; display: flex; flex-direction: column; gap: 6px; }
.form-actions{ display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.save-note{ font-size: .82rem; color: var(--brass); min-height: 1.2em; }

.danger-zone h2{ font-size: 1rem; margin-bottom: 8px; }
.danger-zone p{ color: var(--stone-dark); font-size: .88rem; margin-bottom: 16px; max-width: 56ch; }

/* =========================================================
   Modals
   ========================================================= */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(19,18,17,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 500;
}
.modal-overlay[hidden]{ display: none; }
.modal{
  background: var(--ivory); border-radius: var(--radius);
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  padding: 26px 26px 28px;
}
.modal--small{ max-width: 380px; text-align: center; }
.modal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-head h2{ margin: 0; font-size: 1.25rem; }
.modal-form .form-row{ margin-bottom: 14px; }
.modal-img-preview{ width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; background: var(--ivory-dim); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .stat-grid{ grid-template-columns: repeat(2, 1fr); }
  .dash-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 840px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-sidebar{
    position: fixed; left: 0; top: 0; height: 100%; width: 240px; z-index: 300;
    transform: translateX(-100%); transition: transform .3s var(--ease);
  }
  .admin-shell.sidebar-open .admin-sidebar{ transform: translateX(0); }
  .admin-shell.sidebar-open::after{
    content: ''; position: fixed; inset: 0; background: rgba(19,18,17,.5); z-index: 250;
  }
  .admin-main{ padding: 0 20px 48px; }
  .admin-mobile-toggle{ display: grid; place-items: center; width: 36px; height: 36px; }
  .admin-user-pill{ display: none; }
}

@media (max-width: 640px){
  .stat-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-value{ font-size: 1.5rem; }
  .view-toolbar{ flex-direction: column; align-items: stretch; }
  .admin-table{ font-size: .8rem; }
  .admin-table th:nth-child(4), .admin-table td:nth-child(4){ display: none; }
  .form-row--split{ flex-direction: column; }
}