/* ============================================================
   Jawai Tourism — Admin Panel CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root{
  --forest:#1c3022;--deep:#0f1c12;--gold:#d4a843;--gold-lt:#f0c96a;
  --sand:#e8dcc8;--cream:#f8f4ed;--white:#fff;--sidebar:#132018;
  --danger:#dc3545;--success:#28a745;--warn:#ffc107;
  --border:#e2d9c8;--r:6px;--shadow:0 2px 12px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'DM Sans',sans-serif;background:#edeae4;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:'DM Sans',sans-serif;cursor:pointer}

/* ── Login ─────────────────────────────────────────────── */
.login-page{min-height:100vh;background:var(--deep);display:flex;align-items:center;justify-content:center;padding:2rem}
.login-box{background:var(--white);border-radius:12px;padding:2.8rem 2.5rem;width:100%;max-width:400px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-logo{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--forest);margin-bottom:.25rem}
.login-logo span{color:var(--gold)}
.login-sub{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:#aaa;margin-bottom:2rem}

/* ── Layout ─────────────────────────────────────────────── */
.aw{display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--sidebar);position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100}
.sidebar-logo{padding:1.4rem 1.4rem .9rem;font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--white);border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-logo span{color:var(--gold)}
.sidebar-nav{padding:.8rem 0}
.sidebar-nav a{display:flex;align-items:center;gap:.7rem;padding:.78rem 1.4rem;color:rgba(255,255,255,.5);font-size:.87rem;font-weight:500;transition:all .25s}
.sidebar-nav a:hover,.sidebar-nav a.active{color:var(--white);background:rgba(212,168,67,.1);border-left:3px solid var(--gold)}
.sidebar-nav .ni{font-size:.95rem}
.sidebar-nav .logout:hover{background:rgba(220,53,69,.12);color:#ff6b6b;border-left-color:#ff6b6b}
.sidebar-section{padding:.5rem 1.4rem .3rem;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-top:.5rem}
.main{margin-left:240px;padding:2rem;flex:1;min-height:100vh}

/* ── Page header ─────────────────────────────────────────── */
.page-hdr{margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.page-hdr h1{font-family:'Playfair Display',serif;font-size:1.8rem;color:var(--forest)}
.page-hdr p{color:#777;font-size:.88rem;margin-top:.2rem}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--white);border-radius:8px;padding:1.6rem;box-shadow:var(--shadow);margin-bottom:1.75rem}
.card-title{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--forest);margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--sand)}

/* ── Stat cards ─────────────────────────────────────────── */
.stats-admin{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.75rem}
.stat-card{background:var(--white);border-radius:8px;padding:1.4rem;box-shadow:var(--shadow);border-top:3px solid var(--gold)}
.stat-card .n{font-family:'Playfair Display',serif;font-size:2.2rem;color:var(--forest);font-weight:700}
.stat-card .l{font-size:.77rem;color:#888;margin-top:.2rem}
.stat-card .trend{font-size:.72rem;color:var(--success);margin-top:.3rem}

/* ── Forms ─────────────────────────────────────────────── */
.fg{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.fg label{font-size:.73rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#666}
.fg input,.fg select,.fg textarea{width:100%;padding:.72rem .9rem;border:1.5px solid var(--border);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:.92rem;outline:none;transition:border-color .25s;background:var(--white)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold)}
.fg textarea{resize:vertical;min-height:100px}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b3e26' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem;-webkit-appearance:none}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.full{grid-column:1/-1}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.5rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:none;border-radius:var(--r);cursor:pointer;transition:all .25s}
.btn-gold{background:var(--gold);color:var(--deep)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-forest{background:var(--forest);color:var(--white)}
.btn-forest:hover{background:var(--deep)}
.btn-danger{background:#fee2e2;color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:var(--white)}
.btn-warn{background:#fff3cd;color:#856404}
.btn-warn:hover{background:var(--warn);color:var(--deep)}
.btn-sm{padding:.42rem 1rem;font-size:.74rem}

/* ── Badges ─────────────────────────────────────────────── */
.badge{display:inline-block;padding:.22rem .65rem;border-radius:50px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:capitalize}
.b-pending{background:#fff3cd;color:#856404}
.b-confirmed{background:#d4edda;color:#155724}
.b-cancelled{background:#f8d7da;color:#721c24}
.b-completed{background:#d1ecf1;color:#0c5460}
.b-active{background:#d4edda;color:#155724}
.b-inactive{background:#f8d7da;color:#721c24}
.b-morning{background:#fff9db;color:#7c5c00}
.b-evening{background:#e8eaf6;color:#3949ab}
.b-full_day{background:#e3f2fd;color:#1565c0}
.b-safari{background:#d4edda;color:#1a5e2a}
.b-temple{background:#fce4ec;color:#880e4f}
.b-combo{background:#e8eaf6;color:#283593}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;padding:.7rem 1rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#888;border-bottom:2px solid var(--sand)}
tbody td{padding:.85rem 1rem;font-size:.87rem;color:#444;border-bottom:1px solid #f0ede8;vertical-align:middle}
tbody tr:hover{background:#fdfcfa}

/* ── Alerts ─────────────────────────────────────────────── */
.alert{padding:.85rem 1.1rem;border-radius:var(--r);font-size:.87rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.alert-warn{background:#fff3cd;color:#856404;border:1px solid #ffeeba}

/* ── Upload areas ─────────────────────────────────────────── */
.upload-zone{border:2px dashed var(--border);border-radius:var(--r);padding:2.2rem;text-align:center;cursor:pointer;transition:border-color .25s}
.upload-zone:hover{border-color:var(--gold)}
.upload-zone .uz-icon{font-size:2.2rem;margin-bottom:.6rem}
.upload-zone p{color:#888;font-size:.87rem}
.upload-zone input[type=file]{display:none}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem;margin-top:1.25rem}
.preview-item{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.preview-item img{width:100%;height:100%;object-fit:cover}
.preview-item .del{position:absolute;top:.35rem;right:.35rem;background:rgba(220,53,69,.9);color:#fff;border:none;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.preview-item .del:hover{background:var(--danger)}

/* ── JSON Tag input ─────────────────────────────────────── */
.tag-input-wrap{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem;border:1.5px solid var(--border);border-radius:var(--r);background:var(--white);min-height:46px;cursor:text;transition:border-color .25s}
.tag-input-wrap:focus-within{border-color:var(--gold)}
.tag-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;background:rgba(212,168,67,.12);border:1px solid rgba(212,168,67,.3);border-radius:50px;font-size:.78rem;color:var(--forest)}
.tag-pill button{background:none;border:none;color:#888;cursor:pointer;font-size:.85rem;line-height:1;padding:0}
.tag-pill button:hover{color:var(--danger)}
.tag-input-wrap input{border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:.88rem;flex:1;min-width:120px;padding:.15rem .25rem}

/* ── Toggle ─────────────────────────────────────────────── */
.toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.toggle input{display:none}
.toggle-track{width:44px;height:24px;background:#ddd;border-radius:50px;position:relative;transition:.25s}
.toggle input:checked+.toggle-track{background:var(--success)}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle input:checked+.toggle-track::after{left:23px}
.toggle-lbl{font-size:.85rem;color:#555;font-weight:500}

/* ── Star rating ─────────────────────────────────────────── */
.star-select{display:flex;gap:.4rem}
.star-select input{display:none}
.star-select label{font-size:1.4rem;cursor:pointer;color:#ddd;transition:color .15s}
.star-select input:checked~label,.star-select label:hover,.star-select label:hover~label{color:#ffd700}

/* ── Activity log ─────────────────────────────────────────── */
.log-item{display:flex;align-items:flex-start;gap:1rem;padding:.85rem 0;border-bottom:1px solid #f0ede8}
.log-item:last-child{border-bottom:none}
.log-icon{width:36px;height:36px;border-radius:50%;background:rgba(212,168,67,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.log-body p{font-size:.85rem;color:var(--forest)}
.log-body span{font-size:.75rem;color:#aaa}

@media(max-width:1024px){.stats-admin{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.sidebar{width:100%;position:relative}.main{margin-left:0}.stats-admin{grid-template-columns:1fr}}

/* ── PWA / Responsive additions ── */
.alert { padding: .8rem 1rem; border-radius: 5px; font-size: .88rem; margin-bottom: 1rem; }
.alert-success { background: rgba(40,167,69,.1); border: 1px solid rgba(40,167,69,.3); color: #155724; }
.alert-error   { background: rgba(220,53,69,.1);  border: 1px solid rgba(220,53,69,.3);  color: #721c24; }

/* Responsive admin on mobile */
@media(max-width:768px) {
  .aw { flex-direction: column; }
  .sidebar { width: 100%; min-height: auto; flex-direction: row; flex-wrap: wrap; padding: .75rem; }
  .main { padding: 1rem; }
  .stats-admin { grid-template-columns: 1fr 1fr; }
  table { font-size: .78rem; }
  th, td { padding: .5rem .4rem; }
  .page-hdr { flex-direction: column; gap: .75rem; align-items: flex-start; }
}
@media(max-width:480px) {
  .stats-admin { grid-template-columns: 1fr; }
}