/* ======================================================
   SUMIKA NOVA Portal — additive styles on top of style.css
   ====================================================== */

body{ min-height:100vh; }

.page-wrap{ min-height:calc(100vh - 76px); display:flex; flex-direction:column; }
.page-main{ flex:1; padding:56px 0 80px; }
.page-main.narrow .container{ max-width:640px; }

/* ---------- simple top bar (portal chrome, distinct from marketing nav) ---------- */
.portal-topbar{
  border-bottom:1px solid var(--border-soft);
  background:rgba(8,8,10,0.9);
  position:sticky; top:0; z-index:50;
}
.portal-topbar .row{
  display:flex; align-items:center; justify-content:space-between; height:70px;
}
.portal-topbar .brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; }
.portal-topbar .brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--grad); }
.portal-topbar nav{ display:flex; align-items:center; gap:26px; font-size:.88rem; }
.portal-topbar nav a{ color:var(--text-dim); }
.portal-topbar nav a.active, .portal-topbar nav a:hover{ color:var(--text); }
.portal-topbar .who{ font-size:.8rem; color:var(--text-faint); display:flex; align-items:center; gap:14px; }
.portal-topbar .who .pill{
  padding:3px 10px; border-radius:100px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--grad); color:#08080a;
}

/* ---------- auth / narrow form pages ---------- */
.auth-card{
  max-width:440px; margin:0 auto; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:40px; box-shadow:var(--shadow);
}
.auth-card h1{ font-size:1.7rem; margin-bottom:8px; }
.auth-card .sub{ font-size:.9rem; color:var(--text-dim); margin-bottom:28px; }
.auth-card .field{ margin-bottom:18px; }
.auth-card .foot-link{ margin-top:20px; font-size:.85rem; color:var(--text-faint); text-align:center; }
.auth-card .foot-link a{ color:var(--brass); }

.form-wide{ max-width:720px; }
.form-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:36px;
}

/* ---------- flash / alert banners ---------- */
.alert{
  border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:24px; font-size:.9rem;
  border:1px solid var(--border);
}
.alert-success{ background:rgba(0,191,253,.08); border-color:rgba(0,191,253,.3); color:#bfeeff; }
.alert-error{ background:rgba(230,55,91,.08); border-color:rgba(230,55,91,.35); color:#ffd2dc; }
.alert ul{ margin:6px 0 0; padding-left:18px; }

/* ---------- status pills ---------- */
.status-pill{
  display:inline-block; padding:3px 11px; border-radius:100px; font-size:.7rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.status-pending{ background:rgba(205,160,107,.15); color:var(--brass); border:1px solid var(--brass-dim); }
.status-approved{ background:rgba(0,191,253,.15); color:#7fe0ff; border:1px solid rgba(0,191,253,.4); }
.status-rejected{ background:rgba(230,55,91,.15); color:#ff9fb2; border:1px solid rgba(230,55,91,.4); }

/* ---------- dashboard layout ---------- */
.dash-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; gap:20px; flex-wrap:wrap;
}
.dash-head h1{ font-size:1.9rem; margin:0; }
.dash-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:48px; }
.dash-stat{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:24px; background:var(--panel);
}
.dash-stat .n{ font-family:'Fraunces',serif; font-size:2rem; }
.dash-stat .l{ font-size:.82rem; color:var(--text-faint); margin-top:4px; }
.dash-links{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.dash-link-card{
  display:block; border:1px solid var(--border); border-radius:var(--radius); padding:26px; background:var(--panel);
  transition:border-color .2s, transform .2s;
}
.dash-link-card:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-2px); }
.dash-link-card h3{ margin-bottom:6px; }
.dash-link-card p{ font-size:.86rem; margin:0; }

/* ---------- data table ---------- */
.data-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table th{
  text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.data-table td{ padding:14px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; color:var(--text-dim); }
.data-table tr:hover td{ background:rgba(255,255,255,0.015); }
.data-table .thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--border); }
.data-table .actions{ display:flex; gap:10px; }
.data-table .name-cell{ color:var(--text); font-weight:600; }

.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
.table-wrap .data-table{ margin:0; }
.table-wrap .data-table th:first-child, .table-wrap .data-table td:first-child{ padding-left:18px; }

.empty-state{
  text-align:center; padding:60px 24px; border:1px dashed var(--border); border-radius:var(--radius);
  color:var(--text-faint);
}
.empty-state h3{ color:var(--text); margin-bottom:8px; }

/* ---------- image manager ---------- */
.image-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:14px; margin:18px 0; }
.image-tile{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--border); aspect-ratio:1; }
.image-tile img{ width:100%; height:100%; object-fit:cover; }
.image-tile form{ position:absolute; top:6px; right:6px; }
.image-tile button{
  background:rgba(8,8,10,.8); border:1px solid var(--border); color:var(--text); width:26px; height:26px;
  border-radius:8px; cursor:pointer; font-size:.85rem; line-height:1;
}

.file-drop{
  border:1px dashed var(--border); border-radius:var(--radius-sm); padding:22px; text-align:center;
  font-size:.85rem; color:var(--text-faint); background:var(--bg-alt);
}
.file-drop input{ margin-top:10px; }

/* ---------- dynamic spec rows ---------- */
.spec-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; margin-bottom:10px; align-items:center; }
.spec-row .rm{
  background:transparent; border:1px solid var(--border); color:var(--text-faint); width:38px; height:38px;
  border-radius:10px; cursor:pointer; font-size:1rem;
}
.spec-row .rm:hover{ color:var(--text); border-color:rgba(230,55,91,.5); }
#add-spec-row{ margin-top:4px; }

/* ---------- form action row ---------- */
.form-actions{ display:flex; gap:14px; margin-top:28px; align-items:center; }
.btn-danger{ background:transparent; border:1px solid rgba(230,55,91,.4); color:#ff9fb2; }
.btn-danger:hover{ background:rgba(230,55,91,.08); }
.form-actions .btn-danger{ margin-left:auto; }

/* ---------- public gallery / specs pages ---------- */
.grid-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gallery-card{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--panel);
  display:block; transition:transform .25s, border-color .25s;
}
.gallery-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.18); }
.gallery-card .thumb-wrap{ aspect-ratio:4/3; background:var(--bg-alt); overflow:hidden; }
.gallery-card .thumb-wrap img{ width:100%; height:100%; object-fit:cover; }
.gallery-card .thumb-wrap.empty{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:.8rem; }
.gallery-card .body{ padding:20px 22px 24px; }
.gallery-card h3{ font-size:1.15rem; margin-bottom:6px; }
.gallery-card p{ font-size:.86rem; margin:0; }

.detail-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:32px 0; }
.detail-gallery-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); }

.spec-list{ display:flex; flex-direction:column; gap:12px; }
.spec-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; background:var(--panel);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.spec-card h3{ margin-bottom:4px; font-size:1.1rem; }
.spec-card .meta{ font-size:.8rem; color:var(--text-faint); }

.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.filter-chip{
  padding:8px 16px; border-radius:100px; border:1px solid var(--border); font-size:.82rem; color:var(--text-dim);
}
.filter-chip.active{ background:var(--grad); color:#08080a; border-color:transparent; font-weight:700; }

@media (max-width: 900px){
  .grid-gallery{ grid-template-columns:repeat(2,1fr); }
  .detail-gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-stats{ grid-template-columns:1fr; }
  .dash-links{ grid-template-columns:1fr; }
  .spec-row{ grid-template-columns:1fr; }
  .portal-topbar nav{ display:none; }
}
@media (max-width: 620px){
  .grid-gallery{ grid-template-columns:1fr; }
  .detail-gallery-grid{ grid-template-columns:1fr; }
  .auth-card{ padding:28px; }
  .form-card{ padding:22px; }
}