
:root{
  --admin-bg:#f2efea;
  --admin-surface:#ffffff;
  --admin-border:#ddd4ca;
  --admin-border-soft:#ebe3da;
  --admin-text:#2f241c;
  --admin-muted:#8a7466;
  --admin-primary:#1d8478;
  --admin-primary-2:#2d9bc6;
  --admin-primary-soft:#e7f4f2;
  --admin-orange:#e67a2f;
  --admin-red:#f04a45;
  --admin-green:#2f9e44;
  --admin-shadow:0 16px 40px rgba(52,42,35,.05);
  --admin-radius:18px;
}
.admin-body{
  margin:0;background:var(--admin-bg);color:var(--admin-text);
  font:400 15px/1.55 Inter,Arial,Helvetica,sans-serif;
}
.admin-body *{box-sizing:border-box}
.admin-body a{text-decoration:none;color:inherit}
.admin-body svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.admin-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.admin-sidebar{
  background:#fff;border-right:1px solid var(--admin-border);padding:0 0 18px;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column
}
.admin-brand-block{
  padding:18px 20px;border-bottom:1px solid var(--admin-border);margin-bottom:12px
}
.admin-brand{display:flex;align-items:center;gap:12px}
.admin-brand-name{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.05rem;color:#1f7a70
}
.admin-brand-tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:26px;padding:0 10px;border-radius:6px;
  background:#1f8477;color:#fff;font-size:.88rem;font-weight:700
}
.admin-nav,.admin-sidebar-foot{display:grid;gap:4px;padding:0 8px}
.admin-sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--admin-border)}
.admin-nav-link{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
  color:#655447;font-weight:500;transition:background .2s ease,color .2s ease
}
.admin-nav-link:hover{background:#f5f1ec}
.admin-nav-link.is-active{background:#1d8478;color:#fff;font-weight:700}
.admin-nav-link.is-active .admin-nav-icon{opacity:1}
.admin-nav-icon{
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;
  opacity:.92
}
.admin-content{min-width:0}
.admin-topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:58px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--admin-border)
}
.admin-topbar-meta strong{display:block;font-size:1rem}
.admin-topbar-meta span{display:block;color:var(--admin-muted);font-size:.92rem}
.admin-topbar-actions{display:flex;align-items:center;gap:18px}
.admin-bell{
  position:relative;border:0;background:transparent;padding:8px;border-radius:999px;cursor:pointer;color:#6d5a4d
}
.admin-bell:hover{background:#f5f1ec}
.admin-bell-dot{
  position:absolute;right:7px;top:7px;width:10px;height:10px;border-radius:999px;background:#eb4b45;border:2px solid #fff
}
.admin-user{display:flex;align-items:center;gap:12px}
.admin-avatar{
  width:34px;height:34px;border-radius:999px;background:#2488a1;color:#fff;display:grid;place-items:center;font-weight:800
}
.admin-user-meta strong{display:block;font-size:1rem}
.admin-user-meta small{display:block;color:var(--admin-muted)}
.admin-main{padding:24px 24px 36px}
.admin-page-head{margin-bottom:18px}
.admin-page-head h1{
  margin:0 0 6px;font:700 2.35rem/1.04 Georgia,"Times New Roman",serif;color:#2d2118
}
.admin-page-head p{margin:0;color:var(--admin-muted);font-size:1.02rem}
.admin-page-head .section-kicker{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  color:#1f8477;font-weight:700;text-transform:none;letter-spacing:0;font-size:.95rem
}
.admin-page-head .section-kicker:before{content:none}
.admin-page-head-row,.admin-card-head,.admin-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.admin-page-actions,.actions-row,.admin-quick-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-quick-actions{justify-content:flex-end}
.admin-body .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;
  border-radius:14px;border:1px solid transparent;font-weight:700;cursor:pointer;line-height:1.2;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease
}
.admin-body .btn:hover{transform:translateY(-1px)}
.admin-body .btn-primary{background:linear-gradient(90deg,#1d8478,#2d9bc6);color:#fff;box-shadow:none}
.admin-body .btn-secondary{background:#fff;border-color:var(--admin-border);color:#4e4036}
.admin-body .btn-danger{background:#fff;border-color:#f0c1bf;color:#d93f39}
.admin-body .btn-small{padding:9px 12px;border-radius:12px;font-size:.9rem}
.admin-body .btn-icon-only{width:36px;height:36px;padding:0;border-radius:10px}
.admin-body .btn svg{width:16px;height:16px}
.admin-surface-card,.admin-body .card{
  background:#fff;border:1px solid #e5ddd3;border-radius:20px;padding:18px;box-shadow:none
}
.admin-body .card h2,.admin-surface-card h2{
  margin:0 0 6px;font:700 1.9rem/1.1 Georgia,"Times New Roman",serif;color:#2d2118
}
.admin-body .card p{color:var(--admin-muted)}
.admin-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.admin-metric-card{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 18px
}
.admin-metric-copy span,.stat-card span{display:block;color:var(--admin-muted);margin-bottom:10px}
.admin-metric-copy strong,.stat-card strong{display:block;font-size:1.95rem;line-height:1.1}
.admin-metric-copy small,.stat-card small{display:block;color:#0b8b7b;margin-top:8px}
.admin-metric-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:0 0 44px
}
.admin-metric-card--teal .admin-metric-icon{background:#248ca0}
.admin-metric-card--orange .admin-metric-icon{background:#ea7f2e}
.admin-metric-card--cyan .admin-metric-icon{background:#2b8fa0}
.admin-metric-card--gold .admin-metric-icon{background:#e57a2e}
.stats-grid,.stats-grid-6{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}
.stats-grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.stat-card{
  background:#fff;border:1px solid #e5ddd3;border-radius:20px;padding:18px
}
.admin-dashboard-grid,.admin-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:18px;align-items:start}
.booking-detail-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.admin-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.admin-mini-card{
  background:#fff;border:1px solid #e5ddd3;border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px
}
.admin-mini-icon{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#f7ede5;color:#dd7b2f
}
.admin-mini-card strong{display:block;font-size:1.8rem}
.admin-mini-card span{display:block;color:var(--admin-muted)}
.table-wrap{overflow:auto}
.data-table{width:100%;border-collapse:separate;border-spacing:0}
.data-table th,.data-table td{
  padding:14px 12px;border-bottom:1px solid var(--admin-border-soft);vertical-align:top;text-align:left
}
.data-table thead th{
  color:#8d7767;font-size:.95rem;font-weight:600;background:#fff;position:sticky;top:0;z-index:1
}
.data-table tbody tr:hover td{background:#fcfaf7}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table .amount-strong,.data-table td strong.amount-strong{font-size:1.1rem}
.status-pill{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:.82rem;font-weight:700;background:#eef1f3;color:#55606d
}
.status-pending,.status-pending_payment,.status-awaiting_verification,.status-awaiting_review{background:#fff1e5;color:#df7c2d}
.status-confirmed,.status-paid_in_full,.status-active,.status-verified,.status-completed,.status-sent,.status-deposit_paid,.status-partially_paid{background:#e8f4ee;color:#2f8f5b}
.status-cancelled,.status-failed,.status-rejected,.status-inactive{background:#fdebea;color:#d14942}
.status-inquiry,.status-draft{background:#e8f2fa;color:#2b87ae}
.status-expired,.status-refunded{background:#f2efeb;color:#8a7466}
.admin-meta{display:block;color:var(--admin-muted);font-size:.92rem;margin-top:2px}
.admin-name-cell strong{display:block}
.admin-name-cell .admin-meta{max-width:240px}
.table-thumb-wrap{display:flex;align-items:center;gap:12px}
.table-thumb{
  width:48px;height:48px;border-radius:14px;object-fit:cover;border:1px solid var(--admin-border-soft);background:#f5f1ec
}
.admin-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f3efe8;color:#5e4a3f;font-size:.82rem;font-weight:700
}
.admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-actions form{margin:0}
.admin-search-card,.toolbar-card,.admin-toolbar-card{
  background:transparent;border:0;padding:0;box-shadow:none;margin-bottom:16px
}
.search-inline{display:flex;align-items:center;gap:10px;max-width:520px}
.search-inline input{
  min-height:48px;border-radius:14px;border:1px solid var(--admin-border);padding:12px 14px;background:#fff;color:#2f241c
}
.admin-toolbar-note{color:var(--admin-muted);font-size:.94rem}
.summary-line,.metric-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--admin-border-soft)
}
.summary-line:last-child,.metric-row:last-child{border-bottom:0}
.summary-line span,.metric-row span{color:var(--admin-muted)}
.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-form-grid .full{grid-column:1/-1}
.admin-body label{display:block;margin:0 0 8px;font-weight:600;color:#6b594b}
.admin-body input,.admin-body select,.admin-body textarea{
  width:100%;border:1px solid var(--admin-border);background:#fff;color:#2f241c;padding:12px 14px;border-radius:14px;outline:none
}
.admin-body input:focus,.admin-body select:focus,.admin-body textarea:focus{
  border-color:#49a7c0;box-shadow:0 0 0 4px rgba(45,155,198,.12)
}
.form-card,.admin-form{display:grid;gap:20px}
.admin-image-field{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:16px;align-items:start}
.admin-image-preview-card{display:grid;gap:8px}
.admin-image-preview{
  min-height:220px;border-radius:18px;border:1px dashed var(--admin-border);background:#faf8f5;
  display:grid;place-items:center;overflow:hidden;color:var(--admin-muted);text-align:center;padding:18px
}
.admin-image-preview img{width:100%;height:100%;max-height:280px;object-fit:cover}
.admin-image-inputs{display:grid;gap:12px}
.admin-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.payment-card,.proof-card,.mini-note,.permission-chip,.compact-list li{
  border:1px solid var(--admin-border-soft);border-radius:16px;background:#fbfaf8
}
.payment-card{padding:16px}
.payment-card-head,.proof-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.payment-meta-grid,.proof-gallery,.stack-list,.accordion-list,.timeline,.permission-grid,.icon-list,.payment-info-boxes{display:grid;gap:14px}
.payment-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.proof-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.proof-card{padding:14px}
.proof-preview{
  min-height:180px;border-radius:14px;overflow:hidden;background:#f4efe8;display:grid;place-items:center;margin-bottom:12px
}
.proof-preview img{width:100%;height:100%;object-fit:cover}
.proof-preview-file small{display:block;color:var(--admin-muted);margin-top:6px}
.proof-card-meta p{margin:0 0 6px}
.mini-note{padding:14px}
.mini-note p{margin:4px 0 0;color:var(--admin-muted)}
.verify-form{display:grid;gap:16px;margin-top:16px}
.access-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.permission-chip{display:flex;gap:10px;align-items:flex-start;padding:12px}
.permission-chip input{width:auto;margin-top:2px}
.tab-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.tab-link{
  display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--admin-border);font-weight:700;color:#5b4c41
}
.tab-link.active{background:#1d8478;color:#fff;border-color:#1d8478}
.admin-login-wrap-backend{min-height:100vh;display:grid;place-items:center;padding:24px;background:#efe9df}
.admin-login-panel{
  width:min(1080px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:22px
}
.admin-login-aside{
  padding:42px;border-radius:28px;background:linear-gradient(135deg,#1d8478,#2d9bc6);color:#fff
}
.admin-login-aside h1{margin:12px 0;font:700 3rem/1.03 Georgia,"Times New Roman",serif}
.admin-login-aside .section-kicker,.admin-login-aside p,.admin-login-aside li{color:#fff}
.admin-login-card{padding:32px}
.admin-login-card h2{margin:6px 0;font:700 2rem/1.08 Georgia,"Times New Roman",serif}
.admin-login-card p,.admin-login-label{color:var(--admin-muted)}
.admin-login-card form{display:grid;gap:14px}
.check-list{list-style:none;padding:0;margin:20px 0 0}
.check-list li{position:relative;padding-left:24px;margin-top:10px}
.check-list li:before{content:"✓";position:absolute;left:0;top:0;font-weight:800}
.admin-link{color:#1d8478;font-weight:700}
.reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .45s ease,transform .45s ease}
.reveal-on-scroll.is-revealed{opacity:1;transform:none}

@media (max-width:1180px){
  .stats-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1040px){
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--admin-border)}
  .admin-dashboard-grid,.admin-grid,.booking-detail-grid,.admin-login-panel,.access-role-grid,.proof-gallery,.payment-meta-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .stats-grid,.stats-grid-6,.admin-metric-grid,.admin-mini-grid,.admin-form-grid,.permission-grid,.admin-image-field{grid-template-columns:1fr}
  .admin-main{padding:16px}
  .admin-topbar{padding:12px 16px}
  .admin-page-head h1{font-size:2rem}
  .admin-page-head-row,.admin-card-head,.admin-toolbar,.admin-topbar,.payment-card-head,.proof-card-head{flex-direction:column;align-items:flex-start}
  .admin-user-meta small{font-size:.8rem}
}



.demo-ribbon--admin {
    bottom: auto;
    top: 16px;
}

.demo-chip--admin {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    background: rgba(15, 118, 110, 0.16);
    color: #0f766e;
    border: 1px solid rgba(15, 118, 110, 0.2);
}

.admin-topbar-demo {
    display: inline-block;
    margin-top: 6px;
    color: #0f766e;
    font-weight: 700;
}

.demo-chip--admin-login {
    margin-bottom: 18px;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    border: 1px solid rgba(15, 118, 110, 0.18);
}

.demo-login-block {
    margin-top: 22px;
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}

.demo-login-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.demo-login-list {
    display: grid;
    gap: 10px;
}

.demo-login-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #dbe4ea;
    border-radius: 14px;
    background: #f8fafc;
}

.demo-login-meta {
    display: grid;
    gap: 4px;
}

.demo-login-meta strong {
    font-size: 14px;
}

.demo-login-meta span,
.demo-login-meta code {
    font-size: 12px;
    color: #475569;
    word-break: break-all;
}

.demo-login-meta code {
    background: #e2e8f0;
    padding: 3px 7px;
    border-radius: 8px;
    display: inline-block;
    width: fit-content;
}

@media (max-width: 768px) {
    .demo-login-item {
        flex-direction: column;
        align-items: flex-start;
    }
}
