/* ========================================
   SanoSite Admin Panel - Styles v2
   ======================================== */
:root {
    --sidebar-width: 260px;
    --sidebar-bg: #1e1b4b;
    --sidebar-hover: rgba(255,255,255,.08);
    --sidebar-active: rgba(79,70,229,.3);
    --primary: #4f46e5;
    --primary-light: #6366f1;
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.06), 0 4px 6px -4px rgba(0,0,0,.04);
    --transition: all .2s ease;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; overflow-x:hidden; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* SIDEBAR */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-width); background:var(--sidebar-bg); display:flex; flex-direction:column; z-index:1000; transition:transform .3s ease; overflow-y:auto; }
.sidebar-brand { padding:1.25rem 1.25rem; display:flex; align-items:center; gap:.75rem; font-size:1.3rem; font-weight:800; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand i { font-size:1.4rem; color:var(--primary-light); }
.sidebar-nav { flex:1; padding:.5rem .5rem; display:flex; flex-direction:column; gap:1px; }
.sidebar .nav-link { display:flex; align-items:center; gap:.7rem; padding:.55rem .9rem; color:rgba(255,255,255,.6); text-decoration:none; border-radius:var(--radius-sm); transition:var(--transition); font-size:.82rem; font-weight:500; }
.sidebar .nav-link:hover { background:var(--sidebar-hover); color:rgba(255,255,255,.9); }
.sidebar .nav-link.active { background:var(--sidebar-active); color:#fff; font-weight:600; }
.sidebar .nav-link i { font-size:1rem; width:18px; text-align:center; }
.sidebar .nav-link.feature-locked { opacity:.5; position:relative; }
.sidebar .nav-link.feature-locked:hover { background:rgba(255,255,255,.05); color:rgba(255,255,255,.6); }
.sidebar .nav-link.feature-locked .sidebar-upgrade-badge { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-size:.58rem; font-weight:700; padding:.1rem .35rem; border-radius:4px; letter-spacing:.03em; text-transform:uppercase; margin-left:2px; display:inline-block; line-height:1.2; }
.sidebar-footer { padding:.5rem .5rem; border-top:1px solid rgba(255,255,255,.08); margin-top:auto; }

.mobile-toggle { display:none; position:fixed; top:1rem; left:1rem; z-index:1100; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); width:42px; height:42px; font-size:1.25rem; cursor:pointer; box-shadow:var(--shadow-lg); }

.main-content { margin-left:var(--sidebar-width); min-height:100vh; }

/* TOPBAR */
.topbar-main { background:var(--card-bg); border-bottom:1px solid var(--border); padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; gap:1rem; flex-wrap:wrap; }
.topbar-main h5 { margin:0; font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.topbar-right { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.license-badge,.user-badge { font-size:.78rem; display:flex; align-items:center; gap:.35rem; padding:.3rem .75rem; border-radius:20px; }
.license-badge { background:#f0fdf4; color:#166534; font-weight:500; }
.user-badge { background:#f1f5f9; color:var(--text-muted); }

/* SECTIONS */
.section-panel { display:none; padding:1.5rem; animation:fadeIn .3s ease; }
.section-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem; }
.section-header h6 { margin:0; font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }

/* CARDS */
.content-card { background:var(--card-bg); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); margin-bottom:1.25rem; border:1px solid var(--border); }
.stat-card { background:var(--card-bg); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); border:1px solid var(--border); display:flex; align-items:center; gap:1rem; transition:var(--transition); height:100%; }
.stat-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.stat-card.clickable { cursor:pointer; }
.stat-card-icon { width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
.stat-card-info h3 { margin:0; font-size:1.6rem; font-weight:800; line-height:1.1; }
.stat-card-info span { color:var(--text-muted); font-size:.78rem; font-weight:500; }
.mini-stat-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; text-align:center; box-shadow:var(--shadow); }

/* ACTIVITY */
.activity-list { display:flex; flex-direction:column; gap:.5rem; }
.activity-item { display:flex; align-items:center; gap:.75rem; padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* TABLES */
.table { font-size:.85rem; margin-bottom:0; }
.table thead th { background:#f8fafc; border-bottom:2px solid var(--border); font-weight:600; color:var(--text-muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; padding:.65rem; white-space:nowrap; }
.table tbody td { padding:.65rem; vertical-align:middle; border-bottom:1px solid var(--border); }
.table-hover tbody tr:hover { background:#f8fafc; }

/* BUILDER */
.builder-block { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:.4rem; transition:var(--transition); }
.builder-block:hover { border-color:var(--primary); }
.block-info { display:flex; align-items:center; gap:.7rem; font-size:.85rem; }
.drag-handle { cursor:grab; color:#94a3b8; font-size:1rem; }

/* UPLOAD */
.upload-zone { border:2px dashed #cbd5e1; border-radius:var(--radius); padding:2rem; text-align:center; cursor:pointer; transition:var(--transition); background:#f8fafc; }
.upload-zone:hover,.upload-zone.dragover { border-color:var(--primary); background:rgba(79,70,229,.02); }
.upload-zone i { font-size:2.5rem; color:#94a3b8; display:block; margin-bottom:.5rem; }

/* MEDIA */
.media-item { position:relative; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); transition:var(--transition); }
.media-item:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.media-item img { width:100%; height:150px; object-fit:cover; display:block; }
.media-item-info { padding:.5rem; display:flex; justify-content:space-between; align-items:center; }
.media-item-info small { color:var(--text-muted); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }

/* SLIDER */
.slider-item { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:.4rem; gap:1rem; }
.slider-item-info { display:flex; align-items:center; gap:1rem; flex:1; min-width:0; }
.slider-item img { width:80px; height:50px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.slider-item-placeholder { width:80px; height:50px; background:#e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#94a3b8; flex-shrink:0; }

/* MENU */
.menu-item { display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:.4rem; transition:var(--transition); }
.menu-item:hover { border-color:var(--primary); }
.menu-info { display:flex; align-items:center; gap:.7rem; font-size:.85rem; flex:1; min-width:0; }
.menu-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

/* VERSIONS */
.version-item { border-left:3px solid var(--border); padding-left:1.5rem; margin-bottom:2rem; position:relative; }
.version-item::before { content:''; position:absolute; left:-8px; top:0; width:14px; height:14px; border-radius:50%; background:#94a3b8; border:2px solid #fff; }
.version-item.latest { border-left-color:#10b981; }
.version-item.latest::before { background:#10b981; }
.version-item h5 { margin-bottom:.25rem; }
.version-item ul { padding-left:1.2rem; margin:.5rem 0 0; }
.version-item li { margin-bottom:.25rem; color:var(--text-muted); font-size:.85rem; }

.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state i { font-size:3rem; display:block; margin-bottom:.75rem; opacity:.5; }

.badge { font-weight:500; }
.btn { font-size:.85rem; font-weight:500; border-radius:var(--radius-sm); }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-light); border-color:var(--primary-light); }
.form-control,.form-select { border-radius:var(--radius-sm); border-color:var(--border); font-size:.85rem; }
.form-control:focus,.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.form-label { font-size:.78rem; font-weight:600; color:var(--text-muted); margin-bottom:.3rem; }
.modal-content { border-radius:var(--radius); border:none; box-shadow:0 25px 50px -12px rgba(0,0,0,.15); }
.modal-header { border-bottom:1px solid var(--border); padding:1rem 1.5rem; }
.modal-footer { border-top:1px solid var(--border); padding:1rem 1.5rem; }
.form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.alert { border-radius:var(--radius-sm); font-size:.85rem; }

/* LICENSE USAGE BAR */
.usage-bar-item { margin-bottom:.75rem; }
.usage-bar-item .d-flex { font-size:.82rem; }
.usage-bar-item .progress { height:8px; border-radius:4px; background:#e2e8f0; }
.usage-bar-item .progress-bar { border-radius:4px; transition:width .4s ease; }

/* LICENSE LIMIT WARNING */
.limit-warning { background:#fef2f2; border:1px solid #fecaca; border-radius:var(--radius-sm); padding:.75rem 1rem; margin-bottom:1rem; display:flex; align-items:center; gap:.75rem; }
.limit-warning i { color:#ef4444; font-size:1.2rem; }
.limit-warning .upgrade-link { color:#4f46e5; font-weight:600; cursor:pointer; text-decoration:underline; }

/* PRODUCT GRID */
.product-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); cursor:pointer; }
.product-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.product-card-img { width:100%; height:160px; object-fit:cover; display:block; background:#f1f5f9; }
.product-card-img-placeholder { width:100%; height:160px; background:linear-gradient(135deg,#e2e8f0,#cbd5e1); display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:2rem; }
.product-card-body { padding:.75rem; }
.product-card-body h6 { margin:0 0 .25rem; font-size:.9rem; font-weight:600; }
.product-card-body .price { color:var(--primary); font-weight:700; font-size:1rem; }
.product-card-body .cat-badge { font-size:.7rem; }

/* CATEGORY TREE */
.cat-tree-item { padding:.5rem .75rem; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:.35rem; display:flex; align-items:center; justify-content:space-between; }
.cat-tree-child { margin-left:2rem; }
.cat-tree-item .cat-name { font-weight:500; font-size:.85rem; }

/* LIGHTBOX */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:2000; display:flex; align-items:center; justify-content:center; animation:fadeIn .3s ease; }
.lightbox-close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:1.5rem; width:48px; height:48px; border-radius:50%; cursor:pointer; transition:var(--transition); z-index:2001; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover { background:rgba(255,255,255,.3); }
.lightbox-content { background:var(--card-bg); border-radius:var(--radius); max-width:700px; width:90%; max-height:85vh; overflow-y:auto; padding:2rem; }
.lightbox-content h4 { margin:0 0 1rem; }
.lightbox-content img { max-width:100%; border-radius:var(--radius-sm); margin-bottom:1rem; }

/* NEWS FILTER */
.news-filter-btn.active { background:var(--primary)!important; color:#fff!important; border-color:var(--primary)!important; }

/* SETUP WIZARD */
.setup-option-card { border:2px solid var(--border); border-radius:var(--radius); padding:1.25rem; text-align:center; cursor:pointer; transition:var(--transition); height:100%; }
.setup-option-card:hover { border-color:var(--primary-light); background:rgba(79,70,229,.02); }
.setup-option-card.selected { border-color:var(--primary); background:rgba(79,70,229,.06); box-shadow:0 0 0 3px rgba(79,70,229,.15); }
.setup-option-icon { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto .75rem; }
.setup-option-card h6 { margin:0 0 .35rem; font-weight:700; }

/* HOSTING/DOMAIN INFO */
.hosting-domain-row { display:flex; gap:1rem; flex-wrap:wrap; }
.hosting-domain-item { flex:1; min-width:250px; background:#f8fafc; border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; }
.hosting-domain-item .hd-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:.75rem; }
.hosting-domain-item h6 { font-size:.82rem; font-weight:700; margin:0 0 .5rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.hosting-domain-item .hd-value { font-size:1rem; font-weight:600; color:var(--text); }
.hosting-domain-item .hd-expiry { font-size:.82rem; color:var(--text-muted); margin-top:.25rem; }
.hosting-domain-item .hd-remaining { display:inline-block; padding:.15rem .6rem; border-radius:20px; font-size:.75rem; font-weight:600; margin-top:.35rem; }
.hd-remaining.ok { background:#dcfce7; color:#166534; }
.hd-remaining.warning { background:#fef9c3; color:#854d0e; }
.hd-remaining.danger { background:#fee2e2; color:#991b1b; }

.no-hosting-info { color:var(--text-muted); font-size:.9rem; padding:1rem; text-align:center; }
.no-hosting-info i { font-size:2rem; display:block; margin-bottom:.5rem; opacity:.4; }

/* CAMPAIGN BANNER */
/* Update Badge */
.update-badge { display:inline-flex; align-items:center; gap:.35rem; background:linear-gradient(135deg,#f97316,#ea580c); color:#fff !important; padding:.3rem .75rem; border-radius:20px; font-size:.78rem; font-weight:700; text-decoration:none !important; animation:updatePulse 2s ease-in-out infinite; cursor:pointer; transition:var(--transition); box-shadow:0 2px 8px rgba(249,115,22,.35); }
.update-badge:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(249,115,22,.5); background:linear-gradient(135deg,#ea580c,#c2410c); }
@keyframes updatePulse { 0%,100% { box-shadow:0 2px 8px rgba(249,115,22,.35); } 50% { box-shadow:0 2px 16px rgba(249,115,22,.6); } }

/* Dashboard Update Notice */
#dashboardUpdateNotice { border-left:4px solid #f97316; background:linear-gradient(90deg,rgba(249,115,22,.06),transparent); }
#dashboardUpdateNotice .btn-warning { background:linear-gradient(135deg,#f97316,#ea580c); border:none; }
#dashboardUpdateNotice .btn-warning:hover { background:linear-gradient(135deg,#ea580c,#c2410c); transform:translateY(-1px); }

/* Product Image Upload */
#productImagePreview { position:relative; }
#productImagePreview img { object-fit:cover; }

.campaign-banner { background:linear-gradient(90deg,#dc2626 0%,#b91c1c 40%,#dc2626 80%,#ef4444 100%); background-size:200% 100%; animation:campaignShimmer 4s ease infinite; color:#fff; padding:0; position:relative; z-index:99; box-shadow:0 2px 8px rgba(220,38,38,.3); }
@keyframes campaignShimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.campaign-banner-inner { display:flex; align-items:center; justify-content:center; gap:1rem; padding:.6rem 1.5rem; flex-wrap:wrap; }
.campaign-text { font-size:.85rem; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.15); }
.campaign-btn { background:rgba(255,255,255,.25); color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:20px; padding:.25rem 1rem; font-size:.78rem; font-weight:700; cursor:pointer; transition:var(--transition); backdrop-filter:blur(4px); }
.campaign-btn:hover { background:rgba(255,255,255,.4); transform:scale(1.05); }
.campaign-close { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.1rem; cursor:pointer; position:absolute; right:.75rem; top:50%; transform:translateY(-50%); }
.campaign-close:hover { color:#fff; }

/* LICENSE UPGRADE FLOW */
.upgrade-comparison-card { background:#f8fafc; border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
.upgrade-plan-box { border:2px solid var(--border); border-radius:var(--radius); padding:1rem; text-align:center; background:#fff; }
.upgrade-plan-box.current { border-color:#94a3b8; }
.upgrade-plan-box.target { border-color:var(--primary); background:rgba(79,70,229,.03); }
.upgrade-plan-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:600; margin-bottom:.25rem; }
.upgrade-plan-name { font-size:1.2rem; font-weight:800; color:var(--text); }
.upgrade-plan-price { font-size:1.5rem; font-weight:800; color:var(--primary); margin-top:.25rem; }
.upgrade-plan-box.current .upgrade-plan-price { color:#64748b; }
.upgrade-arrow { font-size:2rem; color:var(--primary); }
.upgrade-diff-box { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem 1.25rem; }

/* PAYMENT */
.payment-amount-display { background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius-sm); font-size:1rem; font-weight:600; display:inline-block; }
.payment-tab-content { border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); padding:1rem; background:#fff; }
#paymentTabs .nav-link { font-size:.85rem; font-weight:500; }
#paymentTabs .nav-link.active { font-weight:700; color:var(--primary); border-color:var(--border) var(--border) #fff; }

/* BANK INFO */
.bank-info-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem; }
.bank-name { font-weight:700; font-size:.9rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.bank-detail { font-size:.82rem; color:var(--text-muted); margin-bottom:.2rem; }
.bank-detail strong { color:var(--text); }

/* RESPONSIVE */
@media (max-width:991px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .mobile-toggle { display:flex; align-items:center; justify-content:center; }
    .main-content { margin-left:0; }
    .topbar-main { padding-left:4rem; }
}
@media (max-width:576px) {
    .section-panel { padding:1rem; }
    .content-card { padding:1rem; }
    .stat-card { padding:1rem; }
    .topbar-right { display:none; }
    .hosting-domain-row { flex-direction:column; }
}