/* ============================================================
   PEARL GORILLA ADMIN PANEL — GREEN THEME
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --sidebar-hover: #1e293b;
  --sidebar-active: rgba(22, 163, 74, 0.15);
  --sidebar-w: 240px;
  --topbar-h: 60px;
  
  /* 🟢 GREEN PRIMARY COLOR */
  --primary: #16a34a;
  --primary-dark: #15803d;
  --primary-light: #22c55e;
  --primary-bg: rgba(22, 163, 74, 0.08);
  
  --green: #16a34a;
  --amber: #d97706;
  --danger: #ef4444;
  --info: #0891b2;
  --purple: #7c3aed;
  --bg: #f8fafc;
  --card: #fff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-mid: #475569;
  --text-muted: #94a3b8;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow: 0 4px 16px rgba(0,0,0,.09);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--sidebar-bg);display:flex;flex-direction:column;z-index:1000;transition:transform .28s}
.sidebar-brand{padding:16px 18px;border-bottom:1px solid var(--sidebar-border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-icon{width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.brand-name{display:block;color:#f1f5f9;font-size:15px;font-weight:700;line-height:1.2}
.brand-sub{display:block;color:#475569;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13px;font-weight:500;color:#64748b;border-left:3px solid transparent;transition:all .13s}
.nav-link:hover{background:var(--sidebar-hover);color:#cbd5e1}
.nav-link.active{background:var(--sidebar-active);color:#4ade80;border-left-color:var(--primary);font-weight:600}
.nav-icon{width:16px;text-align:center;font-size:13px;flex-shrink:0}
.nav-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:20px}
.sidebar-footer{padding:12px 18px;border-top:1px solid var(--sidebar-border);font-size:11px;color:#334155;flex-shrink:0}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:999}
.sidebar-overlay.open{display:block}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;z-index:900;gap:12px}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-right{display:flex;align-items:center;gap:8px;position:relative}
.topbar-hamburger{display:none;background:none;border:none;cursor:pointer;font-size:17px;color:var(--text-mid);padding:6px;border-radius:var(--radius);transition:background .12s}
.topbar-hamburger:hover{background:var(--bg)}
.topbar-title{font-size:15px;font-weight:700;color:var(--text)}
.topbar-icon-btn{width:36px;height:36px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-mid);font-size:14px;cursor:pointer;position:relative;transition:background .12s}
.topbar-icon-btn:hover{background:var(--border)}
.topbar-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:#ef4444;color:#fff;border-radius:50%;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.topbar-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 12px 5px 5px;border-radius:50px;background:var(--bg);border:1px solid var(--border);transition:border-color .12s}
.topbar-user:hover{border-color:var(--primary)}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.topbar-user-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.2}
.topbar-user-role{font-size:11px;color:var(--text-muted)}
.topbar-chevron{font-size:10px;color:var(--text-muted)}
.d-hide-sm{}
.topbar-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:210px;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;z-index:800}
.topbar-dropdown.open{display:block;animation:ddFade .15s ease}
@keyframes ddFade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.topbar-dropdown-header{padding:12px 16px 10px;border-bottom:1px solid var(--sidebar-border)}
.topbar-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:#64748b;transition:background .12s}
.topbar-dropdown a:hover{background:var(--sidebar-hover);color:#cbd5e1}
.topbar-dropdown a i{width:14px}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);padding:24px;min-height:calc(100vh - var(--topbar-h));animation:pageIn .25s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash-msg{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius);margin-bottom:18px;font-size:13.5px;font-weight:500;animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.flash-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.flash-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.flash-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.flash-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-header h4{font-size:19px;font-weight:800;color:var(--text);margin:0 0 3px}
.breadcrumb{font-size:12px;color:var(--text-muted)}
.breadcrumb a{color:var(--primary)}
.breadcrumb a:hover{text-decoration:underline}

/* ============================================================
   CARDS
   ============================================================ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;color:var(--text);display:flex;justify-content:space-between;align-items:center;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card-body{padding:18px}
.card-footer{padding:12px 18px;border-top:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--card)}
.opacity-50{opacity:.5}

/* ============================================================
   STATS
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;display:flex;align-items:center;gap:14px;transition:transform .2s,box-shadow .2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.stat-val{font-size:22px;font-weight:800;color:var(--text);line-height:1}
.stat-label{font-size:12px;color:var(--text-muted);margin-top:3px}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{overflow-x:auto}
table.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th{padding:10px 14px;text-align:left;background:#f8fafc;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);white-space:nowrap}
.dtable td{padding:11px 14px;vertical-align:middle;color:#334155;border-bottom:1px solid #f1f5f9}
.dtable tbody tr:hover td{background:#f8fafc}
.dtable tbody tr:last-child td{border-bottom:none}

/* ============================================================
   BADGES
   ============================================================ */
.badge-green{background:#dcfce7;color:#166534;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.badge-amber{background:#fef3c7;color:#92400e;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.badge-red{background:#fee2e2;color:#991b1b;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.badge-blue{background:#dbeafe;color:#1e40af;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.badge-gray{background:#f1f5f9;color:#475569;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;font-size:13.5px;font-weight:600;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;text-decoration:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:#15803d}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#dc2626}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-gray{background:var(--bg);color:var(--text-mid);border-color:var(--border)}
.btn-gray:hover{background:var(--border)}
.btn-sm{padding:6px 13px;font-size:12.5px}
.btn-icon{width:32px;height:32px;padding:0;justify-content:center}

/* ============================================================
   FORMS
   ============================================================ */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12.5px;font-weight:700;color:var(--text-mid);margin-bottom:5px}
.form-control,.form-select{width:100%;padding:9px 13px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:13.5px;color:var(--text);background:#fff;transition:border-color .15s;outline:none}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.form-control::placeholder{color:#c0c8d0}
textarea.form-control{resize:vertical;min-height:90px}
.form-text{font-size:12px;color:var(--text-muted);margin-top:3px}

/* ============================================================
   FILTERS
   ============================================================ */
.filters-bar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:13px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}

/* ============================================================
   STATUS TABS
   ============================================================ */
.status-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.status-tab{padding:6px 14px;border-radius:50px;font-size:12.5px;font-weight:600;border:1.5px solid var(--border);background:#fff;color:var(--text-mid);cursor:pointer;transition:all .13s;text-decoration:none}
.status-tab:hover{border-color:var(--primary);color:var(--primary)}
.status-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:var(--radius-xl);width:100%;box-shadow:0 20px 60px rgba(0,0,0,.2);max-height:92vh;overflow-y:auto;animation:scaleIn .2s ease}
@keyframes scaleIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.modal-sm{max-width:420px}.modal-md{max-width:620px}.modal-lg{max-width:860px}.modal-xl{max-width:1100px}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-title{font-size:16px;font-weight:800;color:var(--text)}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-muted);padding:4px;line-height:1}
.modal-close:hover{color:var(--text)}

/* ============================================================
   IMAGE PREVIEW
   ============================================================ */
.img-preview{width:80px;height:60px;border-radius:8px;object-fit:cover;margin-top:6px;border:1px solid var(--border)}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{display:flex;gap:5px;flex-wrap:wrap;margin-top:14px}
.page-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius);font-size:13px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--text-mid);text-decoration:none;transition:all .12s}
.page-btn:hover,.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#c4c9d4;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:991px){
  .sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.3)}
  .topbar{left:0}.main-content{margin-left:0}.topbar-hamburger{display:flex}.d-hide-sm{display:none}
}
@media(max-width:600px){.main-content{padding:14px}.stat-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   SIDEBAR — SCROLLABLE
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform .28s;
    overflow: hidden; /* Prevent overflow on the sidebar itself */
}

/* Brand - Fixed at top */
.sidebar-brand {
    padding: 16px 18px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    z-index: 2;
}
.sidebar-brand .brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.sidebar-brand .brand-name {
    display: block;
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.sidebar-brand .brand-sub {
    display: block;
    color: #475569;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ★ SCROLLABLE NAV ★ */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

/* Custom scrollbar for WebKit browsers */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Nav links */
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    border-left: 3px solid transparent;
    transition: all .13s;
    text-decoration: none;
    white-space: nowrap;
}
.nav-link:hover {
    background: var(--sidebar-hover);
    color: #cbd5e1;
}
.nav-link.active {
    background: var(--sidebar-active);
    color: #4ade80;
    border-left-color: var(--primary);
    font-weight: 600;
}
.nav-icon {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}
.nav-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 20px;
}

/* Footer - Fixed at bottom */
.sidebar-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--sidebar-border);
    font-size: 11px;
    color: #334155;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    z-index: 2;
    text-align: center;
}


.gallery-thumb {
    transition: transform 0.15s;
}
.gallery-thumb:hover {
    transform: scale(1.05);
}
.gallery-thumb button {
    opacity: 0.8;
}
.gallery-thumb button:hover {
    opacity: 1;
}