@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css');

:root{
  --main-color:#16a085;
  --red:#eb4d4b;
  --orange:#f39c12;
  --black:#1f2937;
  --light-color:#6b7280;
  --light-bg:#f3f4f6;
  --white:#fff;
  --border:.1rem solid rgba(17,24,39,.08);
  --box-shadow:0 .6rem 1.2rem rgba(17,24,39,.06);
}

*{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Microsoft JhengHei',sans-serif; margin:0; padding:0; box-sizing:border-box; }
html{ font-size: 60%; overflow-x: hidden; }
body{ background:var(--light-bg); color:#111827; }
section{ max-width: 1200px; margin: 0 auto; padding: 2rem; }

a{ color:var(--black); text-decoration:none; }
a:hover{ color:var(--main-color); }

.header{
  position: sticky; top:0; left:0; right:0; background:var(--white);
  z-index:1000; box-shadow:var(--box-shadow);
}
.header .flex{ display:flex; align-items:center; justify-content:space-between; position:relative; max-width:1200px; margin:0 auto; padding: 1rem 2rem; }
.header .flex .logo{ font-size:2.2rem; color:var(--main-color); font-weight:800; }
.header .flex .navbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.header .flex .navbar a, .header .flex .navbar #user-btn{
  height: 3.6rem; line-height: 3.6rem; font-size: 1.5rem; color: var(--black);
  background: #fff; border: 1px solid #e5e7eb; border-radius:.6rem; text-align:center; padding: 0 1rem; cursor: pointer;
}
.header .flex .navbar .danger{ background: var(--red); color:#fff; border-color: transparent; }
.header .flex .navbar a:hover, .header .flex .navbar #user-btn:hover{ background: var(--main-color); color:#fff; border-color: var(--main-color); }

.header .flex .profile{
  position:absolute; top: 120%; right: 2rem; background: var(--white);
  box-shadow: var(--box-shadow); padding: 1.4rem 1.2rem; text-align: left; width: 30rem;
  border-radius: .8rem; border: var(--border); overflow-x: hidden; transform: scale(0); transform-origin: top right;
}
.header .flex .profile.active{ transform:scale(1); transition: .18s linear; }
.header .flex .profile p{ overflow-x:hidden; text-overflow:ellipsis; color: var(--black); font-size:1.6rem; font-weight:600; }
.header .flex .profile .role{ color: var(--light-color); font-size:1.4rem; margin:.2rem 0 1rem; }

.btn,.delete-btn,.option-btn{ display:block; width:100%; }
.inline-btn,.inline-delete-btn,.inline-option-btn{ display:inline-block; }
.btn,.delete-btn,.option-btn,.inline-btn,.inline-delete-btn,.inline-option-btn{
  margin-top:1rem; text-align:center; padding:1rem 1.4rem; font-size:1.6rem;
  border-radius:.6rem; border:var(--border); color:#fff; cursor:pointer; transition:.15s;
}
.btn,.inline-btn{ background:var(--main-color); }
.delete-btn,.inline-delete-btn{ background:var(--red); }
.option-btn,.inline-option-btn{ background:var(--orange); }
.btn:hover,.delete-btn:hover,.option-btn:hover,.inline-btn:hover,.inline-delete-btn:hover,.inline-option-btn:hover{ filter:brightness(.95); }

.card{ background:#fff; border:var(--border); border-radius:.8rem; box-shadow:var(--box-shadow); padding:1.2rem; }
.table{ width:100%; border-spacing:0; border-collapse: collapse; background:#fff; border-radius:.6rem; overflow:hidden; }
.table th, .table td{ font-size:1.5rem; padding:1rem; border-bottom:1px solid #eee; text-align:left; vertical-align: top; }
.table thead th{ background:#f9fafb; color:#374151; font-weight:600; }
.table tr:hover td{ background:#fafafa; }
.empty{ background:var(--white); border-radius:.8rem; border:var(--border); padding:1.6rem; font-size:1.8rem; color:var(--red); text-align:center; width:100%; box-shadow:var(--box-shadow); }

.all-posts .box-container{ display:grid; grid-template-columns:100%; gap: 1.2rem; align-items:flex-start; justify-content:center; }
.all-posts .box-container .box{ align-items:center; background:#fff; box-shadow:var(--box-shadow); border-radius:.8rem; padding:1.2rem; border: var(--border); overflow-x:hidden; }
.all-posts .box-container .box .title{ font-size:1.8rem; color:var(--black); text-overflow:ellipsis; overflow-x:hidden; }

.account-form form{ background:var(--white); box-shadow:var(--box-shadow); padding: 2rem; border: var(--border); border-radius:.8rem; max-width:60rem; margin:0 auto; }
.account-form form h3{ padding-bottom:.6rem; font-size:2.2rem; color:var(--black); text-align:left; font-weight:700; }
.account-form form p{ padding-top:.6rem; font-size:1.4rem; color:var(--light-color); }
.account-form form .box{ width:100%; border-radius:.6rem; padding:1.2rem; font-size:1.6rem; color:var(--black); background:#fff; border: 1px solid #e5e7eb; margin:.8rem 0; }
.account-form form textarea{ height: 15rem; resize: vertical; }

.view-post .row{ display:flex; align-items:stretch; flex-wrap:wrap; gap:2rem; background:#fff; box-shadow:var(--box-shadow); border: var(--border); padding: 2rem; border-radius:.8rem; }
.view-post .row .col{ flex: 1 1 40rem; }
.view-post .row .col .title{ font-size:2rem; color:var(--black); }
.view-post .row .col .flex{ display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between; }
.view-post .row .col .flex .total-reviews h3{ font-size:5rem; color:var(--black); }
.view-post .row .col .flex .total-reviews p{ font-size:1.6rem; color: var(--light-color); padding-top:.6rem; }
.view-post .row .col .flex .total-ratings{ font-size:1.6rem; }

.emp-photo-wrapper{ width:100%; aspect-ratio:4/3; background:#f0f0f0; border-radius:.8rem; overflow:hidden; }
.emp-photo-wrapper img{ width:100%; height:100%; object-fit:cover; }

.tag-badge{ display:inline-block; background:#eef6f3; color:#118a72; padding:.3rem .7rem; border-radius:.6rem; margin:.3rem .4rem 0 0; font-size:1.2rem; }

.admin-layout{ display:flex; max-width:1200px; margin:0 auto; padding:2rem; gap:2rem; }
.admin-sidebar{ flex:0 0 200px; background:#fff; border:var(--border); border-radius:.8rem; box-shadow:var(--box-shadow); padding:1rem; height:max-content; }
.admin-sidebar nav a{ display:block; padding:.8rem 1rem; margin-bottom:.4rem; border-radius:.6rem; font-size:1.4rem; background:#f9fafb; border:1px solid #e5e7eb; color:#1f2937; }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover{ background:var(--main-color); color:#fff; border-color:var(--main-color); }
.admin-main{ flex:1; min-width:0; }

.badge{ display:inline-block; padding:.2rem .6rem; border-radius:.4rem; font-size:1.2rem; color:#fff; }
.badge-success{ background:#2ecc71; }
.badge-danger{ background:#e74c3c; }
.badge-warning{ background:#f39c12; color:#fff; }

@media (max-width:991px){ html{ font-size: 55%; } }
@media (max-width:450px){
  html{ font-size: 50%; }
  .view-post .row .col .image{ height: 22rem; }
  .admin-layout{ padding:1rem; }
}