<?php
// admin/include/sidebar.php  —  LIGHT THEME
$admin_name  = $_SESSION['admin_name']  ?? 'Administrator';
$admin_role  = $_SESSION['admin_role']  ?? 'admin';
$admin_email = $_SESSION['admin_email'] ?? '';
$current_page    = basename($_SERVER['PHP_SELF']);
$current_section = $_GET['section'] ?? '';
function sidebarActive(string $page, string $section = ''): string {
    global $current_page, $current_section;
    return (str_contains($current_page,$page)&&(!$section||$current_section===$section))?'active':'';
}
$role_labels=['superadmin'=>['label'=>'Super Admin','bg'=>'#fff3cd','color'=>'#92400e'],
    'admin'=>['label'=>'Admin','bg'=>'#dbeafe','color'=>'#1d4ed8'],
    'editor'=>['label'=>'Editor','bg'=>'#d1fae5','color'=>'#065f46'],
    'reviewer'=>['label'=>'Reviewer','bg'=>'#ede9fe','color'=>'#5b21b6'],
    'author'=>['label'=>'Author','bg'=>'#f1f5f9','color'=>'#475569']];
$role_info=$role_labels[$admin_role]??$role_labels['admin'];
$initials=implode('',array_map(fn($w)=>strtoupper($w[0]),array_slice(explode(' ',trim($admin_name)),0,2)));
?>

<aside class="rsis-sidebar" id="rsisSidebar">

  <!-- Brand -->
  <div class="sb-brand">
    <div class="sb-logo">
      <svg viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="38" height="38" rx="10" fill="#1d4ed8"/>
        <path d="M11 12h10a5 5 0 0 1 0 10h-4l5 7" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
        <circle cx="11" cy="12" r="2" fill="#93c5fd"/>
      </svg>
    </div>
    <div class="sb-brand-text">
      <span class="sb-brand-name">RSIS Admin</span>
      <span class="sb-brand-sub">Submission System</span>
    </div>
    <button class="sb-collapse-btn" id="sbCollapseBtn" title="Collapse">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
    </button>
  </div>

  <!-- Profile -->
  <div class="sb-profile">
    <div class="sb-avatar"><?= htmlspecialchars($initials ?: 'A') ?></div>
    <div class="sb-profile-info">
      <div class="sb-profile-name"><?= htmlspecialchars($admin_name) ?></div>
      <span class="sb-role-badge" style="background:<?= $role_info['bg'] ?>;color:<?= $role_info['color'] ?>"><?= $role_info['label'] ?></span>
      <?php if($admin_email): ?>
      <div class="sb-profile-email"><?= htmlspecialchars($admin_email) ?></div>
      <?php endif; ?>
    </div>
  </div>

  <!-- Nav -->
  <nav class="sb-nav">

    <div class="sb-group-label">Overview</div>
    <a href="admin_dashboard.php" class="sb-item">
      <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span>
      <span class="sb-label">Dashboard</span>
    </a>

    <div class="sb-group-label">Website Details</div>
    <a href="website-details.php" class="sb-item">
      <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="12" y2="17"/></svg></span>
      <span class="sb-label">Website Details</span>
      <span class="sb-badge" id="badgeSubmissions"></span>
    </a>
    <a href="pages.php" class="sb-item">
      <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></span>
      <span class="sb-label">Website Pages</span>
    </a>
    <a href="subscribers.php" class="sb-item">
      <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
      <span class="sb-label">Subscribers</span>
    </a>
    <!--<a href="issues.php" class="sb-item <?= sidebarActive('issue') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></span>-->
    <!--  <span class="sb-label">Issues &amp; Volumes</span>-->
    <!--</a>-->

    <!--<div class="sb-group-label">People</div>-->
    <!--<a href="reviewers.php" class="sb-item <?= sidebarActive('reviewer') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>-->
    <!--  <span class="sb-label">Reviewers</span>-->
    <!--</a>-->
    <!--<a href="reviewer_cv.php" class="sb-item <?= sidebarActive('reviewer_cv') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="18" rx="2"/><line x1="7" y1="8" x2="17" y2="8"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="7" y1="16" x2="11" y2="16"/></svg></span>-->
    <!--  <span class="sb-label">Reviewer CVs</span>-->
    <!--</a>-->
    <!--<a href="editorial_cv.php" class="sb-item <?= sidebarActive('editorial_cv') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></span>-->
    <!--  <span class="sb-label">Editorial CVs</span>-->
    <!--</a>-->
    <!--<a href="authors.php" class="sb-item <?= sidebarActive('author') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>-->
    <!--  <span class="sb-label">Authors</span>-->
    <!--</a>-->

    <!--<div class="sb-group-label">Content &amp; Finance</div>-->
    <!--<a href="website-details.php" class="sb-item <?= sidebarActive('website-details') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>-->
    <!--  <span class="sb-label">Website Details</span>-->
    <!--</a>-->
    <!--<a href="announcements.php" class="sb-item <?= sidebarActive('announcement') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span>-->
    <!--  <span class="sb-label">Announcements</span>-->
    <!--</a>-->
    <!--<a href="payments.php" class="sb-item <?= sidebarActive('payment') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></span>-->
    <!--  <span class="sb-label">Payments</span>-->
    <!--</a>-->
    <!--<a href="invoices.php" class="sb-item <?= sidebarActive('invoice') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="11" y2="17"/></svg></span>-->
    <!--  <span class="sb-label">Invoices</span>-->
    <!--</a>-->

    <!--<?php if(in_array($admin_role,['superadmin','admin'])): ?>-->
    <!--<div class="sb-group-label">System</div>-->
    <!--<a href="create_admin.php" class="sb-item <?= sidebarActive('create_admin') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg></span>-->
    <!--  <span class="sb-label">Manage Users</span>-->
    <!--</a>-->
    <!--<a href="settings.php" class="sb-item <?= sidebarActive('setting') ?>">-->
    <!--  <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>-->
    <!--  <span class="sb-label">Settings</span>-->
    <!--</a>-->
    <!--<?php endif; ?>-->

  </nav>

  <!-- Logout -->
  <div class="sb-footer">
    <a href="logout.php" class="sb-logout" onclick="return confirm('Are you sure you want to logout?')">
      <span class="sb-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg></span>
      <span class="sb-label">Logout</span>
    </a>
  </div>

</aside>

<!-- Mobile overlay -->
<div class="sb-overlay" id="sbOverlay" onclick="closeMobileSidebar()"></div>

<!-- TOPBAR -->
<header class="rsis-topbar" id="rsisTopbar">
  <div class="tb-left">
    <button class="tb-menu-btn" id="tbMenuBtn">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
        <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
      </svg>
    </button>
    <div class="tb-breadcrumb">
      <span class="tb-root">RSIS</span>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
      <span class="tb-current" id="tbPageTitle">Dashboard</span>
    </div>
  </div>
  <div class="tb-right">
    <button class="tb-icon-btn" id="tbDarkToggle" title="Toggle dark mode">
      <svg id="tbMoonIcon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
      <svg id="tbSunIcon"  width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
    </button>
    <button class="tb-icon-btn" style="position:relative" title="Notifications">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
      <span style="position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#ef4444;border:1.5px solid #fff"></span>
    </button>
    <div class="tb-admin-pill">
      <div class="tb-admin-avatar"><?= htmlspecialchars($initials ?: 'A') ?></div>
      <div class="tb-admin-info">
        <span class="tb-admin-name"><?= htmlspecialchars(explode(' ',$admin_name)[0]) ?></span>
        <span class="tb-admin-role" style="color:<?= $role_info['color'] ?>"><?= $role_info['label'] ?></span>
      </div>
    </div>
    <a href="logout.php" class="tb-logout-btn" onclick="return confirm('Logout?')">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
      <span>Logout</span>
    </a>
  </div>
</header>

<style>
:root {
  --sb-w:258px; --sb-w-col:72px; --tb-h:60px;
  /* ── LIGHT sidebar colours ── */
  --sb-bg:#ffffff;
  --sb-border:#e8edf5;
  --sb-text:#64748b;
  --sb-text-h:#1e293b;
  --sb-section:#b0bec5;
  --sb-hover-bg:#f0f5ff;
  --sb-active-bg:#eff6ff;
  --sb-active-txt:#1d4ed8;
  --sb-icon-bg:#f4f7fb;
  /* ── Topbar ── */
  --tb-bg:#ffffff;
  --tb-border:#e8edf5;
  --tb-text:#1e293b;
  --tb-sub:#64748b;
  --page-bg:#f4f7fc;
  --radius:9px;
  --trans:all .2s cubic-bezier(.4,0,.2,1);
}
body.dark-mode {
  --sb-bg:#1e293b; --sb-border:rgba(255,255,255,.07);
  --sb-text:#94a3b8; --sb-text-h:#f1f5f9; --sb-section:#475569;
  --sb-hover-bg:rgba(255,255,255,.05);
  --sb-active-bg:rgba(29,78,216,.22); --sb-active-txt:#93c5fd;
  --sb-icon-bg:rgba(255,255,255,.06);
  --tb-bg:#1e293b; --tb-border:rgba(255,255,255,.07);
  --tb-text:#f1f5f9; --tb-sub:#94a3b8;
  --page-bg:#0f172a;
  background:#0f172a!important; color:#e2e8f0!important;
}
body.dark-mode .bg-white{background:#1e293b!important;}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#334155!important;color:#f1f5f9!important;border-color:#475569!important;}
body.dark-mode .rsis-page{background:var(--page-bg)!important;}
*,*::before,*::after{box-sizing:border-box;}

/* Sidebar */
.rsis-sidebar{
  position:fixed;top:0;left:0;width:var(--sb-w);height:100vh;
  background:var(--sb-bg);border-right:1.5px solid var(--sb-border);
  display:flex;flex-direction:column;z-index:100;transition:var(--trans);
  box-shadow:2px 0 16px rgba(0,0,0,.06);
}
.rsis-sidebar.collapsed{width:var(--sb-w-col);}
.rsis-sidebar.collapsed .sb-brand-text,
.rsis-sidebar.collapsed .sb-profile-info,
.rsis-sidebar.collapsed .sb-group-label,
.rsis-sidebar.collapsed .sb-label,
.rsis-sidebar.collapsed .sb-badge{opacity:0;pointer-events:none;width:0;overflow:hidden;}
.rsis-sidebar.collapsed .sb-item,.rsis-sidebar.collapsed .sb-logout{justify-content:center;padding:10px 0;}
.rsis-sidebar.collapsed .sb-profile{justify-content:center;padding:14px 0;}
.rsis-sidebar.collapsed .sb-collapse-btn svg{transform:rotate(180deg);}

/* Brand */
.sb-brand{display:flex;align-items:center;gap:10px;padding:17px 14px 13px;border-bottom:1.5px solid var(--sb-border);flex-shrink:0;}
.sb-logo{width:38px;height:38px;flex-shrink:0;}
.sb-logo svg{width:100%;height:100%;}
.sb-brand-text{flex:1;overflow:hidden;transition:var(--trans);}
.sb-brand-name{display:block;font-size:.93rem;font-weight:800;color:var(--sb-text-h);letter-spacing:.3px;}
.sb-brand-sub{display:block;font-size:.63rem;color:var(--sb-text);text-transform:uppercase;letter-spacing:.8px;margin-top:1px;}
.sb-collapse-btn{background:none;border:none;color:var(--sb-text);cursor:pointer;padding:5px;border-radius:7px;display:flex;flex-shrink:0;transition:var(--trans);}
.sb-collapse-btn:hover{background:var(--sb-hover-bg);color:#1d4ed8;}
.sb-collapse-btn svg{transition:transform .25s ease;}

/* Profile */
.sb-profile{display:flex;align-items:center;gap:10px;padding:13px 14px 12px;border-bottom:1.5px solid var(--sb-border);flex-shrink:0;}
.sb-avatar{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#1d4ed8,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;}
.sb-profile-info{overflow:hidden;flex:1;}
.sb-profile-name{font-size:.83rem;font-weight:700;color:var(--sb-text-h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-role-badge{display:inline-block;font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:20px;margin-top:3px;}
.sb-profile-email{font-size:.66rem;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}

/* Nav */
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 10px 4px;scrollbar-width:thin;scrollbar-color:var(--sb-border) transparent;}
.sb-nav::-webkit-scrollbar{width:3px;}
.sb-nav::-webkit-scrollbar-thumb{background:var(--sb-border);border-radius:3px;}

.sb-group-label{font-size:.6rem;font-weight:700;color:var(--sb-section);text-transform:uppercase;letter-spacing:1.1px;padding:13px 6px 4px;white-space:nowrap;overflow:hidden;transition:var(--trans);}

.sb-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--radius);text-decoration:none;color:var(--sb-text);font-size:.82rem;font-weight:500;transition:var(--trans);margin-bottom:1px;white-space:nowrap;}
.sb-item:hover{background:var(--sb-hover-bg);color:var(--sb-text-h);}
.sb-item.active{background:var(--sb-active-bg);color:var(--sb-active-txt);font-weight:600;}
.sb-item.active .sb-icon{background:var(--sb-active-bg);}
.sb-item.active .sb-icon svg{stroke:var(--sb-active-txt);}

.sb-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--sb-icon-bg);transition:var(--trans);}
.sb-icon svg{width:14px;height:14px;stroke:var(--sb-text);transition:var(--trans);}
.sb-item:hover .sb-icon{background:var(--sb-hover-bg);}
.sb-item:hover .sb-icon svg{stroke:#1d4ed8;}

.sb-label{flex:1;transition:var(--trans);}
.sb-badge{font-size:.63rem;font-weight:700;background:#dbeafe;color:#1d4ed8;padding:2px 7px;border-radius:20px;min-width:20px;text-align:center;transition:var(--trans);}

/* Footer */
.sb-footer{padding:10px;border-top:1.5px solid var(--sb-border);flex-shrink:0;}
.sb-logout{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--radius);text-decoration:none;color:#dc2626;font-size:.82rem;font-weight:600;transition:var(--trans);white-space:nowrap;}
.sb-logout:hover{background:#fee2e2;}
.sb-logout .sb-icon{background:#fef2f2;}
.sb-logout .sb-icon svg{stroke:#dc2626;}

/* Overlay */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:99;backdrop-filter:blur(2px);}
.sb-overlay.visible{display:block;}

/* Topbar */
.rsis-topbar{position:fixed;top:0;left:var(--sb-w);right:0;height:var(--tb-h);background:var(--tb-bg);border-bottom:1.5px solid var(--tb-border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:90;transition:var(--trans);box-shadow:0 1px 6px rgba(0,0,0,.04);}
.rsis-topbar.sb-collapsed{left:var(--sb-w-col);}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-right{display:flex;align-items:center;gap:6px;}
.tb-menu-btn{background:none;border:none;color:var(--tb-sub);cursor:pointer;padding:7px;border-radius:8px;display:flex;transition:var(--trans);}
.tb-menu-btn:hover{background:#f0f5ff;color:#1d4ed8;}
.tb-breadcrumb{display:flex;align-items:center;gap:5px;}
.tb-root{font-size:.79rem;color:var(--tb-sub);font-weight:500;}
.tb-breadcrumb svg{color:var(--tb-sub);opacity:.4;}
.tb-current{font-size:.87rem;color:var(--tb-text);font-weight:700;}
.tb-icon-btn{background:none;border:none;color:var(--tb-sub);cursor:pointer;padding:7px;border-radius:8px;display:flex;transition:var(--trans);}
.tb-icon-btn:hover{background:#f0f5ff;color:#1d4ed8;}
.tb-admin-pill{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:40px;background:#f8fafc;border:1.5px solid var(--tb-border);}
body.dark-mode .tb-admin-pill{background:rgba(255,255,255,.05);}
.tb-admin-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#1d4ed8,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;}
.tb-admin-info{display:flex;flex-direction:column;}
.tb-admin-name{font-size:.79rem;font-weight:700;color:var(--tb-text);line-height:1.3;}
.tb-admin-role{font-size:.63rem;font-weight:600;line-height:1;}
.tb-logout-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;font-size:.79rem;font-weight:600;cursor:pointer;text-decoration:none;transition:var(--trans);}
.tb-logout-btn:hover{background:#fecaca;color:#b91c1c;}

/* Page wrapper */
.rsis-page{margin-left:var(--sb-w);padding-top:var(--tb-h);min-height:100vh;background:var(--page-bg);transition:var(--trans);}
.rsis-page.sb-collapsed{margin-left:var(--sb-w-col);}

/* Responsive */
@media(max-width:768px){
  .rsis-sidebar{transform:translateX(-100%);width:var(--sb-w)!important;}
  .rsis-sidebar.mobile-open{transform:translateX(0);}
  .rsis-topbar{left:0!important;}
  .rsis-page{margin-left:0!important;}
  .tb-admin-info,.tb-logout-btn span{display:none;}
  .tb-admin-pill{padding:4px;border-radius:50%;}
}
@media(max-width:480px){.tb-root,.tb-breadcrumb svg{display:none;}}
</style>

<script>
(function(){
  const sidebar=document.getElementById('rsisSidebar');
  const topbar=document.getElementById('rsisTopbar');
  const overlay=document.getElementById('sbOverlay');
  const collapseBtn=document.getElementById('sbCollapseBtn');
  const menuBtn=document.getElementById('tbMenuBtn');
  const pageTitle=document.getElementById('tbPageTitle');
  const darkToggle=document.getElementById('tbDarkToggle');
  const moonIcon=document.getElementById('tbMoonIcon');
  const sunIcon=document.getElementById('tbSunIcon');
  const isMobile=()=>window.innerWidth<=768;

  let collapsed=localStorage.getItem('sbCollapsed')==='1';
  function applyCollapse(animate){
    if(!animate)sidebar.style.transition='none';
    sidebar.classList.toggle('collapsed',collapsed);
    topbar.classList.toggle('sb-collapsed',collapsed);
    document.querySelectorAll('.rsis-page').forEach(p=>p.classList.toggle('sb-collapsed',collapsed));
    if(!animate)requestAnimationFrame(()=>sidebar.style.transition='');
  }
  applyCollapse(false);

  collapseBtn?.addEventListener('click',()=>{
    if(isMobile())return;
    collapsed=!collapsed;
    localStorage.setItem('sbCollapsed',collapsed?'1':'0');
    applyCollapse(true);
  });
  menuBtn?.addEventListener('click',()=>{
    if(isMobile()){
      sidebar.classList.toggle('mobile-open');
      overlay.classList.toggle('visible');
    }else{
      collapsed=!collapsed;
      localStorage.setItem('sbCollapsed',collapsed?'1':'0');
      applyCollapse(true);
    }
  });
  window.closeMobileSidebar=function(){
    sidebar.classList.remove('mobile-open');
    overlay.classList.remove('visible');
  };

  const activeLabel=document.querySelector('.sb-item.active .sb-label');
  if(pageTitle&&activeLabel)pageTitle.textContent=activeLabel.textContent.trim();

  function applyDark(on){
    document.body.classList.toggle('dark-mode',on);
    moonIcon.style.display=on?'none':'';
    sunIcon.style.display=on?'':'none';
  }
  applyDark(localStorage.getItem('darkMode')==='1');
  darkToggle?.addEventListener('click',()=>{
    const on=!document.body.classList.contains('dark-mode');
    applyDark(on);localStorage.setItem('darkMode',on?'1':'0');
  });

  // Collapsed tooltips
  document.querySelectorAll('.sb-item,.sb-logout').forEach(item=>{
    const label=item.querySelector('.sb-label');
    if(!label)return;
    item.addEventListener('mouseenter',()=>{
      if(!sidebar.classList.contains('collapsed'))return;
      let tip=document.getElementById('sbTip');
      if(!tip){
        tip=document.createElement('div');tip.id='sbTip';
        tip.style.cssText='position:fixed;left:calc(var(--sb-w-col) + 10px);background:#1e293b;color:#f8fafc;padding:5px 11px;border-radius:7px;font-size:.77rem;font-weight:500;z-index:9999;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.15);white-space:nowrap;';
        document.body.appendChild(tip);
      }
      const r=item.getBoundingClientRect();
      tip.textContent=label.textContent.trim();
      tip.style.top=(r.top+r.height/2-13)+'px';
      tip.style.display='block';
    });
    item.addEventListener('mouseleave',()=>{const tip=document.getElementById('sbTip');if(tip)tip.style.display='none';});
  });
})();
</script>