/* ========================================================================
   ASAN Executive Portal v2.0
   Dashboard Stylesheet
   ------------------------------------------------------------------------
   Module 1 - Foundation
   ======================================================================== */


/* ========================================================================
   CSS Variables
   ======================================================================== */

:root{

    --asan-primary:#006837;
    --asan-primary-dark:#004d29;
    --asan-primary-light:#1f8b4c;

    --asan-white:#ffffff;
    --asan-background:#f4f7fa;

    --asan-border:#e5e7eb;

    --asan-text:#1f2937;
    --asan-text-light:#6b7280;

    --asan-shadow:0 6px 18px rgba(0,0,0,.08);

    --asan-radius:10px;

}


/* ========================================================================
   Global
   ======================================================================== */

.asan-app,
.asan-app *{

    box-sizing:border-box;

}

.asan-app{

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:var(--asan-background);

    color:var(--asan-text);

    min-height:100vh;

}


/* ========================================================================
   Links
   ======================================================================== */

.asan-app a{

    color:var(--asan-primary);

    text-decoration:none;

    transition:.25s;

}

.asan-app a:hover{

    color:var(--asan-primary-dark);

}


/* ========================================================================
   Layout
   ======================================================================== */

.asan-app-body{

    display:flex;

    min-height:calc(100vh - 80px);

}


/* ========================================================================
   Sidebar
   ======================================================================== */

.asan-sidebar{

    width:280px;

    background:var(--asan-primary);

    color:#fff;

    min-height:100%;

    box-shadow:var(--asan-shadow);

    flex-shrink:0;

}


/* ========================================================================
   Sidebar Header
   ======================================================================== */

.asan-sidebar-brand{

    padding:30px;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.asan-sidebar-brand h2{

    margin:0;

    color:#fff;

    font-size:30px;

    font-weight:700;

}

.asan-sidebar-brand p{

    margin-top:8px;

    color:rgba(255,255,255,.85);

    font-size:15px;

}


/* ========================================================================
   Sidebar Navigation
   ======================================================================== */

.asan-sidebar-nav{

    padding:20px 0;

}

.asan-sidebar-nav ul{

    margin:0;

    padding:0;

    list-style:none;

}

.asan-sidebar-nav li{

    margin:4px 12px;

}

.asan-sidebar-nav li a{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    transition:.25s;

}

.asan-sidebar-nav li a:hover{

    background:rgba(255,255,255,.10);

}

.asan-sidebar-nav li.active a{

    background:#fff;

    color:var(--asan-primary);

    font-weight:600;

}


/* ========================================================================
   Main Content
   ======================================================================== */

.asan-main-content{

    flex:1;

    padding:35px;

}


/* ========================================================================
   Topbar
   ======================================================================== */

.asan-topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    padding:24px 35px;

    box-shadow:var(--asan-shadow);

}

.asan-topbar-left{

    display:flex;

    flex-direction:column;

}

.asan-app-title{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:var(--asan-text);

}

.asan-current-date{

    margin-top:8px;

    color:var(--asan-text-light);

}


/* ========================================================================
   User Summary
   ======================================================================== */

.asan-user-summary{

    text-align:right;

}

.asan-user-name{

    font-weight:600;

    margin-bottom:4px;

}

.asan-user-role{

    color:var(--asan-text-light);

    font-size:14px;

}


/* ========================================================================
   Logout Button
   ======================================================================== */

.asan-btn-logout{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    padding:10px 18px;

    background:var(--asan-primary);

    color:#fff !important;

    border-radius:8px;

    transition:.25s;

}

.asan-btn-logout:hover{

    background:var(--asan-primary-dark);

}


/* ========================================================================
   Widget Base
   ======================================================================== */

.asan-widget{

    background:#fff;

    border-radius:var(--asan-radius);

    padding:25px;

    margin-bottom:30px;

    box-shadow:var(--asan-shadow);

}

.asan-widget-header{

    margin-bottom:25px;

}

.asan-widget-header h2{

    margin:0;

    font-size:24px;

    color:var(--asan-text);

}

.asan-widget-header p{

    margin-top:8px;

    color:var(--asan-text-light);

}

/* ========================================================================
   Module 2 - Dashboard Statistics
   ======================================================================== */

/* Statistics Grid */

.asan-statistics-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

}


/* Statistic Card */

.asan-stat-card{

    background:#ffffff;

    border-left:5px solid var(--asan-primary);

    border-radius:var(--asan-radius);

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:var(--asan-shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.asan-stat-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 28px rgba(0,0,0,.12);

}


/* Icon */

.asan-stat-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:rgba(0,104,55,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.asan-stat-icon .dashicons{

    font-size:30px;

    width:30px;

    height:30px;

    color:var(--asan-primary);

}


/* Details */

.asan-stat-details{

    flex:1;

}

.asan-stat-details h3{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:var(--asan-primary);

    line-height:1;

}

.asan-stat-details p{

    margin:10px 0 0;

    color:var(--asan-text-light);

    font-size:15px;

}


/* Accent Colours */

.asan-stat-applications{

    border-left-color:#006837;

}

.asan-stat-members{

    border-left-color:#1f8b4c;

}

.asan-stat-volumes{

    border-left-color:#0b7a75;

}

.asan-stat-papers{

    border-left-color:#2e7d32;

}


/* Widget spacing */

.asan-statistics-widget{

    margin-bottom:35px;

}