/* ==========================================================================
   MRASIL Admin — prototype-only stylesheet.
   Loads AFTER ../assets/css/style.css and reuses its color/type tokens
   exactly, so the admin UI feels like part of the same product rather
   than a bolted-on tool. Layout here (sidebar, tables, modals) is new.
   ========================================================================== */

body{ background:var(--charcoal); }

/* ---- Demo banner ---- */
.demo-banner{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--champagne); color:var(--champagne-ink);
  font-size:.76rem; letter-spacing:.04em; text-align:center; padding:7px 12px;
  font-weight:500;
}
.demo-banner b{ font-weight:700; }

/* ---- Login gate ---- */
.login-screen{
  position:fixed; inset:0; z-index:400; background:var(--near-black);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line-soft);
  padding:clamp(28px,4vw,44px); border-radius:4px;
}
.login-card img{ height:34px; margin-bottom:22px; }
.login-card h1{ font-size:1.5rem; margin-bottom:8px; }
.login-card .sub{ color:var(--ink-2); font-size:.88rem; margin-bottom:26px; }
.login-hint{
  margin-top:20px; padding:14px 16px; background:rgba(153,141,129,.1);
  border:1px dashed var(--line-strong); font-size:.78rem; color:var(--ink-2); line-height:1.7;
}
.login-hint code{ color:var(--champagne); }
.login-error{ display:none; color:#c98077; font-size:.82rem; margin-top:14px; }
.login-error.is-visible{ display:block; }

/* ---- App shell ---- */
.admin-app{ display:none; padding-top:34px; min-height:100vh; }
.admin-app.is-active{ display:flex; }

.admin-sidebar{
  width:240px; flex-shrink:0; background:var(--near-black); border-right:1px solid var(--line-soft);
  min-height:calc(100vh - 34px); padding:24px 16px; display:flex; flex-direction:column;
  position:sticky; top:34px; align-self:flex-start;
}
.admin-sidebar .brand{ display:flex; align-items:center; gap:10px; padding:0 8px 24px; border-bottom:1px solid var(--line-soft); margin-bottom:18px; }
.admin-sidebar .brand img{ height:26px; }
.admin-sidebar .brand span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--label-muted); display:block; margin-top:2px; }
.admin-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.admin-nav button{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:4px;
  font-size:.86rem; color:var(--ink-2); text-align:left; width:100%; transition:background .25s,color .25s;
}
.admin-nav button svg{ width:17px; height:17px; flex-shrink:0; }
.admin-nav button:hover{ background:rgba(238,239,243,.05); color:var(--ink-1); }
.admin-nav button.is-active{ background:var(--champagne); color:var(--champagne-ink); }
.admin-nav .badge{
  margin-left:auto; background:rgba(238,239,243,.12); color:var(--ink-1); font-size:.66rem;
  padding:2px 7px; border-radius:999px; min-width:18px; text-align:center;
}
.admin-nav button.is-active .badge{ background:rgba(28,26,23,.25); color:var(--champagne-ink); }
.admin-sidebar-foot{ display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1px solid var(--line-soft); margin-top:16px; }
.admin-sidebar-foot a, .admin-sidebar-foot button{ font-size:.8rem; color:var(--ink-3); text-align:left; padding:6px 8px; transition:color .25s; }
.admin-sidebar-foot a:hover, .admin-sidebar-foot button:hover{ color:var(--champagne); }

.admin-main{ flex:1; min-width:0; padding:clamp(20px,3vw,44px); }
.admin-view{ display:none; }
.admin-view.is-active{ display:block; animation:fadein .3s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.admin-topbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:30px; flex-wrap:wrap; }
.admin-topbar h1{ font-size:1.7rem; }
.admin-topbar p{ color:var(--ink-2); font-size:.9rem; margin-top:6px; max-width:56ch; }

/* ---- Stat cards ---- */
.admin-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
@media (max-width:900px){ .admin-stats{ grid-template-columns:repeat(2,1fr);} }
.admin-stat{ background:var(--surface); border:1px solid var(--line-soft); padding:20px 22px; border-radius:4px; }
.admin-stat .n{ font-family:var(--font-display); font-size:2rem; color:var(--champagne); }
.admin-stat .l{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--label-muted); margin-top:6px; }

.admin-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:4px; padding:clamp(18px,2.4vw,28px); margin-bottom:20px; }
.admin-card + .admin-card{ margin-top:20px; }
.admin-card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.admin-card-head h3{ font-size:1.15rem; }
.admin-card-head .tag{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--label-muted); border:1px solid var(--line-strong); padding:4px 10px; border-radius:999px; }

/* ---- Forms ---- */
.a-field{ margin-bottom:16px; }
.a-field label{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--label-muted); margin-bottom:7px; }
.a-field input, .a-field textarea, .a-field select{
  width:100%; background:var(--charcoal); border:1px solid var(--line-strong); border-radius:3px;
  padding:10px 12px; color:var(--ivory); font-size:.9rem; transition:border-color .25s;
}
.a-field input:focus, .a-field textarea:focus, .a-field select:focus{ border-color:var(--champagne); outline:none; }
.a-field textarea{ min-height:80px; resize:vertical; }
.a-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .a-row-2{ grid-template-columns:1fr; } }
.a-field[dir="rtl"] input, .a-field[dir="rtl"] textarea{ text-align:right; }

.a-btn{
  display:inline-flex; align-items:center; gap:8px; padding:.7em 1.3em; font-size:.8rem;
  border-radius:3px; font-weight:500; transition:all .25s; border:1px solid transparent; white-space:nowrap;
}
.a-btn svg{ width:14px; height:14px; }
.a-btn-primary{ background:var(--champagne); color:var(--champagne-ink); }
.a-btn-primary:hover{ background:var(--silver-soft); }
.a-btn-ghost{ border-color:var(--line-strong); color:var(--ink-1); }
.a-btn-ghost:hover{ border-color:var(--champagne); color:var(--champagne); }
.a-btn-danger{ border-color:rgba(197,113,101,.4); color:#d38a7f; }
.a-btn-danger:hover{ background:rgba(197,113,101,.12); border-color:#c57165; }
.a-btn-sm{ padding:.45em 0.9em; font-size:.72rem; }
.a-btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---- Toggle switch (visibility) ---- */
.a-toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.a-toggle input{ display:none; }
.a-toggle .track{ width:34px; height:19px; border-radius:999px; background:var(--taupe-dark); position:relative; transition:background .25s; }
.a-toggle .track::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--ink-1); transition:transform .25s; }
.a-toggle input:checked + .track{ background:var(--champagne); }
.a-toggle input:checked + .track::after{ transform:translateX(15px); background:var(--champagne-ink); }
.a-toggle span.lbl{ font-size:.76rem; color:var(--ink-2); }

/* ---- Image manager ---- */
.a-images{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.a-img-thumb{ position:relative; width:76px; height:76px; border-radius:4px; overflow:hidden; border:1px solid var(--line-soft); }
.a-img-thumb img{ width:100%; height:100%; object-fit:cover; }
.a-img-thumb button{
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(12,9,9,.75); color:#fff; display:flex; align-items:center; justify-content:center;
}
.a-img-thumb button svg{ width:11px; height:11px; }
.a-img-add{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.a-img-add input[type="text"]{ flex:1; min-width:160px; }

/* ---- Tables / lists ---- */
.a-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.a-table th{ text-align:left; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--label-muted); padding:10px 12px; border-bottom:1px solid var(--line-soft); }
.a-table td{ padding:12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-1); }
.a-table tr:last-child td{ border-bottom:none; }
.a-table img.thumb{ width:44px; height:44px; object-fit:cover; border-radius:3px; }
.a-table .actions{ display:flex; gap:6px; justify-content:flex-end; }
.a-table-wrap{ overflow-x:auto; }

.a-empty{ text-align:center; padding:36px 20px; color:var(--ink-3); font-size:.88rem; }

/* ---- Tabs (Reviews) ---- */
.a-tabs{ display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--line-soft); }
.a-tab{ padding:10px 4px; font-size:.84rem; color:var(--ink-2); position:relative; margin-right:20px; }
.a-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; }
.a-tab.is-active{ color:var(--ivory); }
.a-tab.is-active::after{ background:var(--champagne); }
.a-tab .badge{ background:rgba(238,239,243,.1); font-size:.66rem; padding:1px 7px; border-radius:999px; margin-left:6px; }

.a-review{ background:var(--charcoal); border:1px solid var(--line-soft); border-radius:4px; padding:18px 20px; margin-bottom:12px; }
.a-review-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.a-review-head .who b{ font-size:.95rem; }
.a-review-head .who span{ display:block; font-size:.76rem; color:var(--label-muted); margin-top:2px; }
.a-review-stars{ color:var(--champagne); display:flex; gap:2px; }
.a-review-stars svg{ width:13px; height:13px; }
.a-review p.txt{ margin-top:12px; color:var(--ink-2); font-size:.88rem; line-height:1.7; }
.a-review-foot{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.a-status-pill{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.a-status-pill.pending{ background:rgba(153,141,129,.18); color:var(--champagne); }
.a-status-pill.approved{ background:rgba(120,166,120,.16); color:#8fbf8f; }
.a-status-pill.rejected{ background:rgba(197,113,101,.16); color:#d38a7f; }

/* ---- Modal ---- */
.a-modal-overlay{ position:fixed; inset:0; z-index:350; background:rgba(12,9,9,.8); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.a-modal-overlay.is-open{ display:flex; }
.a-modal{ width:100%; max-width:640px; background:var(--surface); border:1px solid var(--line-soft); border-radius:4px; padding:clamp(22px,3vw,34px); }
.a-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.a-modal-head h3{ font-size:1.25rem; }
.a-modal-close{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.a-modal-close svg{ width:14px; height:14px; }
.a-modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); }

/* ---- Toast (reuse pattern) ---- */
.a-toast{
  position:fixed; bottom:24px; right:24px; z-index:500; background:var(--surface); border:1px solid var(--champagne);
  color:var(--ivory); padding:13px 20px; font-size:.84rem; border-radius:4px; opacity:0; transform:translateY(10px);
  transition:opacity .3s, transform .3s; pointer-events:none; max-width:320px;
}
.a-toast.is-visible{ opacity:1; transform:translateY(0); }

/* ---- Activity log ---- */
.a-log{ display:flex; flex-direction:column; gap:0; }
.a-log-item{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.82rem; }
.a-log-item:last-child{ border-bottom:none; }
.a-log-item time{ color:var(--label-muted); flex-shrink:0; font-size:.74rem; padding-top:1px; }
.a-log-item span{ color:var(--ink-2); }

.a-note{ font-size:.78rem; color:var(--ink-3); line-height:1.7; margin-top:8px; }
.a-note.warn{ color:#d3ab7f; }

/* ---- Responsive: collapse sidebar to top bar on small screens ---- */
@media (max-width:860px){
  .admin-app.is-active{ flex-direction:column; }
  .admin-sidebar{ width:100%; position:static; min-height:auto; flex-direction:row; align-items:center; padding:12px 14px; overflow-x:auto; }
  .admin-sidebar .brand{ border-bottom:none; padding:0 14px 0 0; margin-bottom:0; border-right:1px solid var(--line-soft); }
  .admin-nav{ flex-direction:row; }
  .admin-nav button span.lbl-text{ display:none; }
  .admin-sidebar-foot{ flex-direction:row; border-top:none; border-left:1px solid var(--line-soft); margin-top:0; padding-top:0; padding-left:12px; margin-left:8px; }
  .admin-main{ padding:20px 16px 60px; }
}