/* =====================================================================
   AGENTBROMO — Admin Panel Styles
   ===================================================================== */
:root {
  --ash: #16110d; --ash-2: #221a13; --ember: #e2571e; --ember-deep:#b8410f;
  --gold:#f2a93b; --paper:#f6f3ee; --ink:#2a2018; --ink-soft:#71655a;
  --line:#e6ded2; --ok:#2f855a; --bad:#c53030; --warn:#b8830f;
  --side: 256px; --radius:14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--paper); color: var(--ink); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: 'Bricolage Grotesque','Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: 1rem; }

/* ---- Layout ---- */
.admin { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--side); background: var(--ash); color: rgba(255,255,255,.75);
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column;
  padding: 22px 16px; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar .logo { display: flex; align-items: center; gap: 10px; font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.25rem; color:#fff; padding: 6px 8px 22px; }
.sidebar .logo .mark { width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--gold),var(--ember));display:grid;place-items:center;color:#fff }
.sidebar .logo b { color: var(--gold); }
.nav-group { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35); padding: 18px 10px 8px; }
.sidebar nav a {
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  font-weight:600; font-size:.93rem; margin-bottom:2px; transition: background .15s, color .15s;
}
.sidebar nav a .ic { width:20px; text-align:center; }
.sidebar nav a:hover { background: rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.active { background: var(--ember); color:#fff; box-shadow: 0 8px 18px -8px var(--ember); }
.sidebar .side-foot { margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font-size:.85rem; }
.sidebar .side-foot .who { color:#fff; font-weight:700; }
.sidebar .side-foot .role { font-size:.72rem; color:var(--gold); text-transform:uppercase; letter-spacing:.08em; }

.main { flex:1; margin-left: var(--side); min-width: 0; }
.topbar {
  background:#fff; border-bottom:1px solid var(--line); padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30;
}
.topbar h1 { font-size:1.3rem; }
.topbar .crumb { font-size:.82rem; color:var(--ink-soft); }
.content { padding: 28px; max-width: 1280px; }
.burger { display:none; background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--ink); }

/* ---- Cards / KPI ---- */
.kpi-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.kpi {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; position:relative; overflow:hidden;
}
.kpi .ic { position:absolute; right:16px; top:16px; font-size:1.5rem; opacity:.25; }
.kpi .lbl { font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.kpi .val { font-family:'Bricolage Grotesque'; font-size:1.85rem; font-weight:800; margin-top:6px; }
.kpi .sub { font-size:.78rem; color:var(--ink-soft); margin-top:4px; }
.kpi.accent { background:linear-gradient(135deg,var(--ember),var(--ember-deep)); color:#fff; border:0; }
.kpi.accent .lbl,.kpi.accent .sub { color:rgba(255,255,255,.8); }

.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-top:22px; }
.panel-head { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h3 { font-size:1.1rem; }
.panel-body { padding:22px; }

/* ---- Tables ---- */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; min-width:560px; }
table.data th { text-align:left; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:12px 16px; border-bottom:2px solid var(--line); }
table.data td { padding:14px 16px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }
table.data tr:hover td { background:#fbf8f3; }
.mono { font-variant-numeric: tabular-nums; }

/* ---- Badges ---- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.b-ok { background:#e6f4ec; color:var(--ok); }
.b-warn { background:#fbeed6; color:var(--warn); }
.b-bad { background:#fbe4e4; color:var(--bad); }
.b-info { background:#e7eefb; color:#2b59c3; }
.b-mut { background:#eee8df; color:var(--ink-soft); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; padding:10px 18px; border-radius:10px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; }
.btn-primary { background:var(--ember); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 18px -8px var(--ember); }
.btn-outline { background:#fff; border-color:var(--line); color:var(--ink); }
.btn-outline:hover { border-color:var(--ember); color:var(--ember-deep); }
.btn-sm { padding:7px 12px; font-size:.82rem; border-radius:8px; }
.btn-danger { background:#fbe4e4; color:var(--bad); }
.btn-danger:hover { background:var(--bad); color:#fff; }

/* ---- Forms ---- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:.85rem; font-weight:600; color:var(--ink); }
.field input, .field select, .field textarea {
  padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(226,87,30,.12); }
.field .hint { font-size:.78rem; color:var(--ink-soft); }
.form-actions { display:flex; gap:10px; margin-top:6px; }

/* ---- Alerts ---- */
.alert { padding:13px 18px; border-radius:12px; font-weight:600; font-size:.92rem; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.alert-success { background:#e6f4ec; color:var(--ok); }
.alert-error { background:#fbe4e4; color:var(--bad); }

/* ---- Login ---- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px;
  background: radial-gradient(800px 500px at 80% -10%, rgba(242,169,59,.4), transparent 60%), linear-gradient(160deg,#2a1c12,#16110d); }
.login-card { background:#fff; border-radius:20px; padding:38px; width:100%; max-width:400px; box-shadow:0 30px 70px -30px rgba(0,0,0,.6); }
.login-card .logo { display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.4rem; margin-bottom:6px; }
.login-card .logo .mark { width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--ember));display:grid;place-items:center;color:#fff; }
.login-card .logo b { color:var(--ember-deep); }
.login-card p.sub { color:var(--ink-soft); font-size:.9rem; margin-bottom:24px; }
.login-card .field { margin-bottom:16px; }
.cred-hint { margin-top:18px; padding:12px; background:var(--paper); border-radius:10px; font-size:.82rem; color:var(--ink-soft); text-align:center; }

/* ---- Calendar (master booking) ---- */
.cal { width:100%; border-collapse:collapse; }
.cal th { padding:10px; font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; }
.cal td { border:1px solid var(--line); height:84px; vertical-align:top; padding:6px; width:14.28%; }
.cal td .dnum { font-size:.82rem; font-weight:700; color:var(--ink-soft); }
.cal td.today { background:#fff8ef; }
.cal td.today .dnum { color:var(--ember); }
.cal .ev { font-size:.7rem; padding:2px 6px; border-radius:6px; margin-top:3px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal .ev-jeep { background:#e7eefb; color:#2b59c3; }
.cal .ev-villa { background:#f3e8fb; color:#7b34c0; }
.cal .ev-block { background:#fbeed6; color:var(--warn); }

/* ---- Responsive ---- */
@media (max-width: 980px) { .kpi-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left:0; }
  .burger { display:block; }
  .form-grid { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .content { padding:18px; }
}

/* ===== Upload & media (v2) ===== */
.upload-row { display:flex; gap:16px; align-items:flex-start; }
.thumb-prev {
  width:64px; height:64px; flex:none; border-radius:10px; overflow:hidden;
  background:var(--paper); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--ink-soft);
}
.thumb-prev.wide { width:110px; height:66px; }
.thumb-prev img { width:100%; height:100%; object-fit:cover; display:block; }

.logo-chip {
  width:40px; height:40px; flex:none; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--ember),var(--gold)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
}
.logo-chip img { width:100%; height:100%; object-fit:cover; display:block; }

/* Instagram-style 4-column gallery grid (admin) */
.media-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.media-item { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.media-item > img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--paper); }
.media-item .media-meta { padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:.8rem; }
.media-item .media-meta b { font-size:.82rem; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px){ .media-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .media-grid { grid-template-columns:repeat(2,1fr); } }

/* Pagination */
.pager { display:flex; gap:6px; justify-content:center; align-items:center; margin-top:22px; flex-wrap:wrap; }
.pager a, .pager span {
  min-width:36px; height:36px; padding:0 10px; border-radius:9px; border:1.5px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:600;
  color:var(--ink); text-decoration:none;
}
.pager a:hover { border-color:var(--ember); }
.pager .cur { background:var(--ember); border-color:var(--ember); color:#fff; }
.pager .dis { opacity:.4; pointer-events:none; }

/* ===== Rich Text Editor (articles) ===== */
.rte { border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.rte-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:3px; padding:8px 10px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; overflow-x:auto; }
.rte-toolbar::-webkit-scrollbar { height:6px; }
.rte-toolbar::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; }
.rte-group { display:flex; gap:2px; flex:none; }
.rte-sep { width:1px; align-self:stretch; background:var(--line); margin:2px 5px; flex:none; }
.rte-btn {
  min-width:30px; height:30px; padding:0 7px; border:1px solid transparent; border-radius:7px; flex:none;
  background:#fff; color:var(--ink); font-size:.82rem; font-weight:600; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; transition:.12s;
}
.rte-btn:hover { background:var(--ember); color:#fff; }
.rte-btn.active { background:var(--ink); color:#fff; }
.rte-editor { min-height:520px; max-height:72vh; overflow-y:auto; padding:24px 26px; font-size:1.02rem; line-height:1.75; color:var(--ink); outline:none; }
.rte-editor:focus { box-shadow:inset 0 0 0 2px rgba(226,87,30,.18); }
.rte-editor h2 { font-family:'Bricolage Grotesque'; font-size:1.5rem; margin:18px 0 10px; }
.rte-editor h3 { font-family:'Bricolage Grotesque'; font-size:1.22rem; margin:16px 0 8px; }
.rte-editor p { margin:0 0 12px; }
.rte-editor ul, .rte-editor ol { margin:0 0 12px; padding-left:24px; }
.rte-editor img { max-width:100%; max-height:340px; height:auto; border-radius:8px; margin:10px 0; }
.rte-editor blockquote { border-left:3px solid var(--ember); margin:12px 0; padding:4px 0 4px 14px; color:var(--ink-soft); font-style:italic; }
.rte-editor a { color:var(--ember-deep); }
.rte-source { width:100%; min-height:520px; padding:18px 20px; border:0; outline:none; font-family:ui-monospace,monospace; font-size:.86rem; line-height:1.6; resize:vertical; }

.pub-bar {
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between;
  margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.pub-schedule { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.pub-schedule label { display:block; font-size:.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:5px; }
.pub-schedule input { padding:9px 11px; border:1.5px solid var(--line); border-radius:9px; font:inherit; }
.pub-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:640px){ .pub-bar { flex-direction:column; align-items:stretch; } .pub-actions { justify-content:stretch; } .pub-actions .btn { flex:1; } }