/* ===========================
   CONTRIB ORGANIZER DASHBOARD
=============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

:root{

    /* Backgrounds */
    --bg:#071019;
    --sidebar:#0B1623;
    --card:#111827;
    --card2:#1E293B;
    --surface:#111827;

    /* Text */
    --text:#F8FAFC;
    --muted:#94A3B8;

    /* Brand */
    --green:#22C55E;
    --green-dark:#16A34A;
   --green-border:rgba(34,197,94,.5);

    /* Status */
    --success:#10B981;
    --warning:#F59E0B;
    --danger:#EF4444;
    --info:#3B82F6;

    /* Borders */
    --border:rgba(255,255,255,.08);

    /* Buttons */
    --button-bg:#FFFFFF;
    --button-text:#111827;
  
  /* Hero */
--hero-start:#1DB954;
--hero-end:#0F9D58;

/* Sidebar Navigation */
--nav-text:#CBD5E1;

/* Scrollbar */
--scrollbar:#1E293B;
--scrollbar-hover:#334155;

/* Notification */
--notification:#EF4444;

/* Overlay */
--overlay:rgba(0,0,0,.55);

/* Shadow */
--shadow:0 8px 30px rgba(0,0,0,.18);

  /*Toggle BG */
  --toggle-bg:#334155;
}

/* ===========================
        LIGHT THEME
=============================*/

body.light-theme{

    --bg:#F1F5F9;

    --card:#FFFFFF;

    --card2:#F1F5F9;

    --text:#0F172A;

    --muted:#64748B;
    --hero-start:#22C55E;
--hero-end:#16A34A;

--nav-text:#475569;

--scrollbar:#CBD5E1;
--scrollbar-hover:#94A3B8;

--notification:#DC2626;

--overlay:rgba(15,23,42,.18);

--shadow:0 10px 30px rgba(15,23,42,.06);

    --border:rgba(15,23,42,.08);
  --sidebar:#FFFFFF;

}

body{

    background:var(--bg);
    color:var(--text);

}

/* Overlay */

.overlay{

    position:fixed;
    inset:0;

   background:var(--overlay);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

}

.overlay.show{

    opacity:1;

    visibility:visible;

}

a{

    text-decoration:none;
    color:inherit;

}

/* ===========================
      DASHBOARD LAYOUT
=============================*/

.dashboard{

    display:grid;
    grid-template-columns:260px 1fr;
    min-height:100vh;

}

/* ===========================
        SIDEBAR
=============================*/

.sidebar{

   background:var(--sidebar);
    padding:30px 22px;
    border-right:1px solid var(--border);

}

.logo{

    margin-bottom:45px;

}

.logo h2{

    font-size:30px;

    font-weight:800;

    color:var(--text);

}

.logo p{

    color:var(--muted);
    margin-top:5px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:12px;

    flex:1;

}

.sidebar nav a{

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    transition:.3s;

   color:var(--nav-text);

}

.sidebar nav a:hover{

    background:var(--green);

    color:white;

    transform:translateX(6px);

}

.sidebar nav a.active{

    background:linear-gradient(135deg,var(--green),var(--green-dark));

    color:white;

}

.sidebar i{

    width:20px;
  color:inherit;

}

/* ===========================
          MAIN
=============================*/

.main{

    padding:30px;

}

/* ===========================
          TOPBAR
=============================*/

.topbar{

    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:30px;

}

.mobile-menu{

display:none;

align-items:center;
justify-content:center;

width:44px;
height:44px;

border-radius:12px;

background:var(--card);

cursor:pointer;

flex-shrink:0;

}

.search{

    flex:1;

}

.search input{

    width:100%;

    background:var(--card);

    border:1px solid var(--border);

   color:var(--text);

    padding:15px 18px;

    border-radius:15px;

    outline:none;

}

.search input::placeholder{

    color:var(--muted);

}

.profile{

    display:flex;
    align-items:center;
    gap:25px;

    margin-left:auto;

}

.notify{

    position:relative;

    font-size:22px;

    cursor:pointer;

}

.notify span{

    position:absolute;

    top:-10px;

    right:-12px;

    background:var(--danger);

    width:18px;
    height:18px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:.7rem;

}

.user{

    display:flex;

    align-items:center;

    gap:12px;

}

.user img{

    width:52px;
    height:52px;

    border-radius:50%;

}

.user p{

    color:var(--muted);
    font-size:.85rem;

}

/* ===========================
            HERO
=============================*/

.hero{

    display:flex;

    justify-content:space-between;

    align-items:center;

   background:linear-gradient(
135deg,
var(--hero-start),
var(--hero-end)
);

    border-radius:24px;

    padding:35px;

    margin-bottom:30px;

}

.hero h1{

    font-size:34px;
    margin-bottom:10px;

}

.hero p{

    opacity:.95;

}

.hero button{

    border:none;

    padding:15px 26px;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    background:var(--button-bg);

color:var(--button-text);

    transition:.3s;

}

.hero button:hover{

    transform:translateY(-3px);

}

/* ===========================
            STATS
=============================*/

.stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:35px;

}

.stat-card{

    background:var(--card);

    border:1px solid var(--border);

    padding:28px;

    border-radius:20px;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-6px);

    border-color:var(--green-border);
  
}

.stat-card h2{

    font-size:34px;

    color:var(--green);

}

.stat-card p{

    color:var(--muted);

    margin-top:8px;

}

/* ===========================
        SECTION TITLE
=============================*/

.title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.title a{

    color:var(--green);

}

/* ===========================
      QUICK ACTIONS
=============================*/

.actions{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:18px;

    margin-bottom:35px;

}

.action{

    background:var(--card);

    border-radius:18px;

    padding:22px;

    text-align:center;

    border:1px solid var(--border);

    cursor:pointer;

    transition:.35s;

}

.action:hover{

    transform:translateY(-8px);

    border-color:var(--green);

}

.action i{

    font-size:26px;

    color:var(--green);

    margin-bottom:15px;

}

/* ===========================
        CONTENT GRID
=============================*/

.content-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    margin-bottom:30px;

}

.panel{

    background:var(--card);

    border-radius:22px;

    padding:25px;

    border:1px solid var(--border);

}

/* ===========================
        CIRCLE CARD
=============================*/

.circle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.circle:last-child{

    border:none;

}

.circle h3{

    margin-bottom:6px;

}

.circle p{

    color:var(--muted);

}

.circle span{

    color:var(--green);

    font-weight:600;

}

/* ===========================
      PAYMENT QUEUE
=============================*/

.payment{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.payment:last-child{

    border:none;

}

.payment p{

    color:var(--muted);

}
.payment button{

    border:none;

    background:var(--green);

    color:var(--button-bg);

    padding:10px 16px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

.payment button:hover{

    background:var(--green-dark);

}

/* ===========================
      APPROVED PAYMENT
=============================*/

.payment button.approved{

    background:var(--info);

    cursor:default;

    opacity:.95;

}

.payment button.approved:hover{

    background:var(--info);

    transform:none;

}
/* ===========================
        ACTIVITY
=============================*/

.activity ul{

    list-style:none;

}

.activity li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid var(--border);

}

.activity li:last-child{

    border:none;

}

.activity small{

    color:var(--muted);

}

/* ===========================
        SCROLLBAR
=============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--scrollbar);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--scrollbar-hover);

}

/* ===========================
        RESPONSIVE
=============================*/

@media(max-width:1200px){

.stats{

grid-template-columns:repeat(2,1fr);

}

.actions{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:992px){

.dashboard{

    grid-template-columns:1fr;

}

/* Sidebar becomes an off-canvas menu */
 
.sidebar{

    display:flex;

    flex-direction:column;

    position:fixed;

    top:0;

    left:-280px;

    width:260px;

    height:100vh;

    background:var(--sidebar);

    padding:30px 22px;

    transition:left .35s cubic-bezier(.22,.61,.36,1);

    z-index:1000;

    box-shadow:var(--shadow);

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}

/* This is what JS toggles */

.sidebar.showSidebar{

    left:0;

}

.mobile-menu{

    display:flex;

    font-size:24px;

    cursor:pointer;

}

.content-grid{

    grid-template-columns:1fr;

}

.hero{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

}

@media(max-width:768px){

.main{

padding:18px;

}

.stats{

grid-template-columns:1fr;

}

.actions{

grid-template-columns:repeat(2,1fr);

}

.topbar{

flex-wrap:wrap;

}

.profile{

display:flex;
align-items:center;
gap:20px;

margin-left:auto;

width:auto;

}

.hero h1{

font-size:28px;

}

}

@media(max-width:500px){

.actions{

grid-template-columns:1fr;

}

.hero{

padding:25px;

}

.hero button{

width:100%;

}

.search{

order:3;

width:100%;

}

}

/* ===========================
        THEME TOGGLE
=============================*/

.theme-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

     margin-top:auto;

    padding:14px 16px;

    border-radius:14px;

    background:var(--card);

    border:1px solid var(--border);

}

.theme-label{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--nav-text);

    font-size:.95rem;

    font-weight:500;

}

.theme-label i{

    color:var(--green);

}

/* Toggle Switch */

.switch{

    position:relative;

    display:inline-block;

    width:52px;

    height:28px;

}

.switch input{

    opacity:0;

    width:0;

    height:0;

}

.slider{

    position:absolute;

    inset:0;

    cursor:pointer;

   background:var(--toggle-bg);

    border-radius:50px;

    transition:.35s;

}

.slider::before{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    left:3px;

    top:3px;

    background:var(--toggle-knob);

    border-radius:50%;

    transition:.35s;
  
  --toggle-knob:#FFFFFF;

}

.switch input:checked + .slider{

    background:var(--green);

}

.switch input:checked + .slider::before{

    transform:translateX(24px);

}

/* Smooth Theme Animation */

body,
.sidebar,
.main,
.panel,
.stat-card,
.action,
.hero,
.search input{

    transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease;

}