/* ============================================================
   COE HONG – ADMIN PANEL STYLESHEET
   ============================================================ */
:root{
  --g-dark:#0d4a26;--g:#1a6b3a;--g-light:#2eab58;--g-pale:#e8f5ed;
  --yellow:#f5a800;--yellow-pale:#fff8e6;
  --sidebar-bg:#111827;--sidebar-w:260px;
  --topbar-h:64px;
  --white:#fff;--off:#f8fafc;
  --gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;
  --gray-500:#64748b;--gray-700:#334155;--gray-900:#0f172a;
  --red:#ef4444;--red-pale:#fef2f2;
  --blue:#3b82f6;--blue-pale:#eff6ff;
  --shadow-sm:0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 4px 16px rgba(0,0,0,.12);
  --radius:8px;--tr:all .2s ease;
  --font:'Inter',-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;}
body{font-family:var(--font);background:var(--off);color:var(--gray-700);display:flex;min-height:100vh;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{border:none;background:none;cursor:pointer;font-family:inherit;}
img{max-width:100%;display:block;}
input,select,textarea{font-family:inherit;}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  z-index:200;
  transition:transform .3s ease;
  overflow-y:auto;
}
.sidebar-brand{
  padding:1.25rem 1rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:.75rem;
}
.sidebar-brand img{width:40px;height:40px;border-radius:50%;object-fit:contain;background:rgba(255,255,255,.1);padding:3px;}
.sidebar-brand-text strong{display:block;color:#fff;font-size:.88rem;font-weight:700;}
.sidebar-brand-text span{font-size:.68rem;color:rgba(255,255,255,.45);letter-spacing:.04em;text-transform:uppercase;}

.sidebar-nav{flex:1;padding:.75rem 0;}
.nav-group-label{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.3);padding:.75rem 1rem .25rem;margin-top:.5rem;
}
.sidebar-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem 1rem;
  font-size:.83rem;color:rgba(255,255,255,.65);
  border-left:3px solid transparent;
  transition:var(--tr);
}
.sidebar-link i{width:18px;text-align:center;font-size:.9rem;color:rgba(255,255,255,.35);}
.sidebar-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-link:hover i{color:var(--yellow);}
.sidebar-link.active{background:rgba(26,107,58,.25);color:#fff;border-left-color:var(--g-light);}
.sidebar-link.active i{color:var(--g-light);}
.sidebar-badge{margin-left:auto;background:var(--yellow);color:var(--g-dark);font-size:.62rem;font-weight:700;padding:.1rem .45rem;border-radius:10px;}

.sidebar-footer{
  padding:.875rem 1rem;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:.75rem;
}
.sidebar-user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--g);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.85rem;flex-shrink:0;
}
.sidebar-user-name{font-size:.8rem;color:rgba(255,255,255,.75);font-weight:500;}
.sidebar-user-role{font-size:.68rem;color:rgba(255,255,255,.35);}
.sidebar-logout{margin-left:auto;color:rgba(255,255,255,.35);font-size:.9rem;transition:var(--tr);}
.sidebar-logout:hover{color:var(--red);}

/* ── MAIN AREA ── */
.admin-main{
  flex:1;
  margin-left:var(--sidebar-w);
  display:flex;flex-direction:column;
  min-height:100vh;
}

/* Top Bar */
.admin-topbar{
  height:var(--topbar-h);background:var(--white);
  border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;
  position:sticky;top:0;z-index:100;
  box-shadow:var(--shadow-sm);
}
.topbar-left{display:flex;align-items:center;gap:1rem;}
.topbar-title{font-size:1rem;font-weight:700;color:var(--gray-900);}
.topbar-breadcrumb{font-size:.75rem;color:var(--gray-500);}
.topbar-breadcrumb a{color:var(--g);}
.topbar-right{display:flex;align-items:center;gap:.75rem;}
.topbar-btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .875rem;border-radius:var(--radius);
  font-size:.78rem;font-weight:600;transition:var(--tr);
}
.topbar-btn-primary{background:var(--g);color:#fff;}
.topbar-btn-primary:hover{background:var(--g-dark);}
.topbar-btn-outline{border:1.5px solid var(--gray-200);color:var(--gray-700);}
.topbar-btn-outline:hover{border-color:var(--g);color:var(--g);}
.topbar-view-site{background:var(--yellow-pale);color:var(--g-dark);border:1.5px solid var(--yellow);}
.topbar-view-site:hover{background:var(--yellow);}
.hamburger-admin{display:none;flex-direction:column;gap:5px;padding:.5rem;}
.hamburger-admin span{display:block;width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:var(--tr);}

/* Content */
.admin-content{flex:1;padding:1.75rem 1.5rem;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem;}
.page-header h1{font-size:1.3rem;font-weight:700;color:var(--gray-900);}

/* ── CARDS ── */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);}
.card-header{padding:1rem 1.25rem;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;}
.card-header h2{font-size:.95rem;font-weight:700;color:var(--gray-900);}
.card-body{padding:1.25rem;}

/* Stats Row */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;}
.stat-box{background:var(--white);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);display:flex;align-items:center;gap:1rem;}
.stat-box-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.stat-box-icon.green{background:var(--g-pale);color:var(--g);}
.stat-box-icon.yellow{background:var(--yellow-pale);color:#c47d00;}
.stat-box-icon.blue{background:var(--blue-pale);color:var(--blue);}
.stat-box-icon.red{background:var(--red-pale);color:var(--red);}
.stat-box-num{font-size:1.6rem;font-weight:800;color:var(--gray-900);line-height:1;}
.stat-box-label{font-size:.75rem;color:var(--gray-500);margin-top:.2rem;}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.83rem;}
thead th{background:var(--gray-100);color:var(--gray-700);font-weight:600;padding:.75rem 1rem;text-align:left;border-bottom:2px solid var(--gray-200);white-space:nowrap;}
tbody td{padding:.75rem 1rem;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--gray-100);}
.td-title{font-weight:600;color:var(--gray-900);max-width:280px;}
.td-title p{font-weight:400;color:var(--gray-500);font-size:.75rem;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;}

/* Badges */
.badge{display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.badge-green{background:var(--g-pale);color:var(--g);}
.badge-yellow{background:var(--yellow-pale);color:#c47d00;}
.badge-red{background:var(--red-pale);color:var(--red);}
.badge-blue{background:var(--blue-pale);color:var(--blue);}
.badge-gray{background:var(--gray-100);color:var(--gray-500);}

/* Action buttons */
.action-btns{display:flex;gap:.375rem;align-items:center;}
.btn-icon{
  width:30px;height:30px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;transition:var(--tr);
}
.btn-icon-edit{background:var(--blue-pale);color:var(--blue);}
.btn-icon-edit:hover{background:var(--blue);color:#fff;}
.btn-icon-delete{background:var(--red-pale);color:var(--red);}
.btn-icon-delete:hover{background:var(--red);color:#fff;}
.btn-icon-view{background:var(--g-pale);color:var(--g);}
.btn-icon-view:hover{background:var(--g);color:#fff;}

/* ── FORMS ── */
.form-grid{display:grid;gap:1rem;}
.form-grid-2{grid-template-columns:1fr 1fr;}
.form-group{display:flex;flex-direction:column;gap:.35rem;}
.form-label{font-size:.78rem;font-weight:600;color:var(--gray-700);}
.form-label span{color:var(--red);}
.form-control{
  padding:.6rem .875rem;
  border:1.5px solid var(--gray-200);border-radius:var(--radius);
  font-size:.85rem;color:var(--gray-900);background:var(--white);
  transition:var(--tr);outline:none;width:100%;
}
.form-control:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(26,107,58,.1);}
textarea.form-control{resize:vertical;min-height:120px;}
select.form-control{cursor:pointer;}
.form-hint{font-size:.72rem;color:var(--gray-500);}
.form-check{display:flex;align-items:center;gap:.5rem;cursor:pointer;}
.form-check input{width:16px;height:16px;accent-color:var(--g);cursor:pointer;}
.form-check-label{font-size:.83rem;color:var(--gray-700);}

/* Rich text placeholder */
.rich-textarea{min-height:200px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:var(--radius);font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--tr);border:none;}
.btn-primary{background:var(--g);color:#fff;}
.btn-primary:hover{background:var(--g-dark);}
.btn-secondary{background:var(--gray-100);color:var(--gray-700);border:1.5px solid var(--gray-200);}
.btn-secondary:hover{background:var(--gray-200);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:#dc2626;}
.btn-warning{background:var(--yellow);color:var(--g-dark);}
.btn-warning:hover{background:#d48c00;}
.btn-sm{padding:.4rem .75rem;font-size:.75rem;}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--white);border-radius:12px;box-shadow:var(--shadow-md);
  width:100%;max-width:640px;max-height:90vh;
  display:flex;flex-direction:column;
  animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:translateY(0);}}
.modal-header{padding:1.1rem 1.25rem;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{font-size:1rem;font-weight:700;color:var(--gray-900);}
.modal-close{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:var(--tr);}
.modal-close:hover{background:var(--gray-100);color:var(--gray-900);}
.modal-body{padding:1.25rem;overflow-y:auto;flex:1;}
.modal-footer{padding:1rem 1.25rem;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:.625rem;}

/* ── ALERTS ── */
.alert{padding:.875rem 1rem;border-radius:var(--radius);font-size:.83rem;display:flex;align-items:flex-start;gap:.625rem;margin-bottom:1rem;}
.alert i{margin-top:1px;flex-shrink:0;}
.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;}
.alert-error{background:var(--red-pale);border:1px solid #fecaca;color:#dc2626;}
.alert-warning{background:var(--yellow-pale);border:1px solid #fed7aa;color:#c47d00;}
.alert-info{background:var(--blue-pale);border:1px solid #bfdbfe;color:#1d4ed8;}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:1000;display:flex;flex-direction:column;gap:.5rem;}
.toast{
  background:var(--gray-900);color:#fff;padding:.875rem 1rem;
  border-radius:var(--radius);box-shadow:var(--shadow-md);
  font-size:.83rem;display:flex;align-items:center;gap:.625rem;
  min-width:260px;max-width:360px;
  animation:toastIn .3s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.toast.success{background:var(--g);}
.toast.error{background:var(--red);}
.toast.warning{background:#d48c00;}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;}
.page-link{
  min-width:32px;height:32px;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;border:1.5px solid var(--gray-200);
  color:var(--gray-700);transition:var(--tr);
}
.page-link:hover{border-color:var(--g);color:var(--g);}
.page-link.active{background:var(--g);border-color:var(--g);color:#fff;}
.page-link.disabled{opacity:.4;pointer-events:none;}

/* ── IMAGE PREVIEW ── */
.img-preview-wrap{
  width:100%;height:160px;border:2px dashed var(--gray-300);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  background:var(--gray-100);overflow:hidden;position:relative;cursor:pointer;transition:var(--tr);
}
.img-preview-wrap:hover{border-color:var(--g);}
.img-preview-wrap img{width:100%;height:100%;object-fit:cover;}
.img-preview-placeholder{text-align:center;color:var(--gray-500);}
.img-preview-placeholder i{font-size:2rem;margin-bottom:.5rem;display:block;}
.img-preview-placeholder span{font-size:.75rem;}

/* ── DASHBOARD TABLES ── */
.recent-section{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;}

/* ── FILTERS ROW ── */
.filters-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;}
.filters-row .form-control{max-width:180px;}
.search-input-wrap{position:relative;flex:1;max-width:320px;}
.search-input-wrap i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray-500);font-size:.85rem;}
.search-input-wrap input{padding-left:2.25rem;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .admin-main{margin-left:0;}
  .hamburger-admin{display:flex;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .recent-section{grid-template-columns:1fr;}
  .form-grid-2{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .stats-row{grid-template-columns:1fr 1fr;}
  .admin-content{padding:1rem;}
  .modal{max-width:100%;margin:.5rem;}
}