/* =====================================================
   WBGovHub Admin Panel CSS V2
   Part 1
===================================================== */

:root{

--bg:#0b1220;
--panel:#111b2e;
--panel2:#17233a;
--card:#1a2944;

--primary:#2f80ff;
--primary2:#4fa3ff;

--success:#17c964;
--danger:#ff4d6d;
--warning:#f5a524;

--text:#ffffff;
--muted:#9fb0d1;

--border:#263857;

--radius:18px;

--shadow:0 12px 30px rgba(0,0,0,.25);

--transition:.30s;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
"Poppins",
"Segoe UI",
sans-serif;

background:var(--bg);

color:var(--text);

}

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}

button,
input,
select,
textarea{

font-family:inherit;

outline:none;

border:none;

}

.admin-shell{

display:flex;

min-height:100vh;

}

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

.sidebar{

width:260px;

background:linear-gradient(
180deg,
#111c30,
#0d1627
);

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

position:fixed;

left:0;
top:0;
bottom:0;

overflow:auto;

transition:.3s;

z-index:999;

}

.sidebar::-webkit-scrollbar{

width:6px;

}

.sidebar::-webkit-scrollbar-thumb{

background:#35528a;

border-radius:50px;

}

.admin-brand{

display:flex;

align-items:center;

gap:15px;

padding:22px;

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

}

.admin-brand b{

width:52px;
height:52px;

border-radius:14px;

background:linear-gradient(
135deg,
#2f80ff,
#6ab7ff
);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#fff;

}

.admin-brand span{

font-size:18px;

font-weight:700;

}

.admin-brand small{

display:block;

margin-top:4px;

font-size:11px;

color:var(--muted);

letter-spacing:1px;

}

/* menu */

.sidebar nav{

padding:20px 12px;

}

.sidebar nav a{

display:flex;

align-items:center;

gap:12px;

padding:14px 16px;

margin-bottom:8px;

border-radius:14px;

font-size:15px;

transition:.25s;

color:#d8e4ff;

}

.sidebar nav a:hover{

background:#203353;

transform:translateX(5px);

}

.sidebar nav a.active{

background:linear-gradient(
90deg,
#2f80ff,
#519cff
);

color:#fff;

box-shadow:0 8px 20px rgba(47,128,255,.35);

}

.logout{

display:block;

margin:20px;

padding:15px;

border-radius:14px;

background:#ff4d6d;

text-align:center;

font-weight:600;

transition:.3s;

}

.logout:hover{

background:#ff2955;

}
/* =====================================================
   WBGovHub Admin Panel CSS V2
   Part 2
   Main Layout + Header + Dashboard
=====================================================*/

/* ==========================
Main Area
==========================*/

.admin-main{

margin-left:260px;

width:calc(100% - 260px);

min-height:100vh;

display:flex;

flex-direction:column;

background:#0b1220;

}

/* ==========================
Top Header
==========================*/

.admin-top{

height:75px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 25px;

background:rgba(17,27,46,.95);

backdrop-filter:blur(10px);

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

position:sticky;

top:0;

z-index:100;

}

/* Toggle Button */

.side-toggle{

width:45px;

height:45px;

border-radius:12px;

background:var(--panel2);

color:#fff;

cursor:pointer;

font-size:20px;

transition:.3s;

}

.side-toggle:hover{

background:var(--primary);

}

/* Search */

.admin-search{

width:420px;

height:48px;

padding:0 18px;

background:#17233a;

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

border-radius:14px;

color:#fff;

font-size:15px;

transition:.3s;

}

.admin-search:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(47,128,255,.15);

}

/* Right */

.admin-top-right{

display:flex;

align-items:center;

gap:18px;

}

.admin-icon{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

background:#17233a;

border-radius:14px;

cursor:pointer;

transition:.3s;

font-size:18px;

}

.admin-icon:hover{

background:var(--primary);

}

.admin-avatar{

width:46px;

height:46px;

border-radius:50%;

background:linear-gradient(135deg,#2f80ff,#66b5ff);

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

font-weight:700;

color:#fff;

}

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

.admin-content{

padding:30px;

}

.admin-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.admin-title h1{

font-size:32px;

font-weight:700;

}

.admin-title .muted{

font-size:14px;

color:var(--muted);

margin-bottom:8px;

}

/* ==========================
Dashboard Grid
==========================*/

.dashboard-grid{

display:grid;

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

gap:20px;

margin-bottom:30px;

}

.dashboard-card{

background:linear-gradient(180deg,#182846,#111b2e);

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

border-radius:18px;

padding:24px;

display:flex;

align-items:center;

gap:20px;

box-shadow:var(--shadow);

transition:.35s;

}

.dashboard-card:hover{

transform:translateY(-6px);

border-color:var(--primary);

}

.card-icon{

width:65px;

height:65px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:rgba(47,128,255,.12);

}

.card-body h3{

font-size:30px;

font-weight:700;

margin-bottom:6px;

}

.card-body p{

font-size:14px;

color:var(--muted);

}

/* Card Colors */

.dashboard-card.success .card-icon{

background:rgba(23,201,100,.15);

}

.dashboard-card.warning .card-icon{

background:rgba(245,165,36,.15);

}

.dashboard-card.danger .card-icon{

background:rgba(255,77,109,.15);

}

.dashboard-card.primary .card-icon{

background:rgba(47,128,255,.15);

}

.dashboard-card.info .card-icon{

background:rgba(0,184,212,.15);

}

.dashboard-card.dark .card-icon{

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

}

/* ==========================
Panels
==========================*/

.panel{

background:var(--panel);

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

border-radius:18px;

padding:25px;

margin-bottom:25px;

box-shadow:var(--shadow);

}

.panel h2{

font-size:22px;

margin-bottom:20px;

}
/* =====================================================
   WBGovHub Admin Panel CSS V2
   Part 3
   Forms + Buttons + Upload + Flash
=====================================================*/

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

.form-grid{

display:grid;

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

gap:22px;

}

.field{

display:flex;

flex-direction:column;

gap:8px;

}

.field.full{

grid-column:1/-1;

}

.field label{

font-size:14px;

font-weight:600;

color:#dce7ff;

}

/* ==========================
Input
==========================*/

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
select,
textarea{

width:100%;

padding:14px 16px;

background:#182846;

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

border-radius:14px;

color:#fff;

font-size:15px;

transition:.25s;

}

textarea{

resize:vertical;

min-height:130px;

}

input:focus,
select:focus,
textarea:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(47,128,255,.15);

}

/* ==========================
File Upload
==========================*/

input[type=file]{

width:100%;

padding:18px;

border:2px dashed #35528a;

border-radius:16px;

background:#16233d;

color:#d9e5ff;

cursor:pointer;

transition:.3s;

}

input[type=file]:hover{

border-color:var(--primary);

background:#1d3156;

}

/* Banner Preview */

#bannerPreview{

margin-top:15px;

max-width:100%;

border-radius:16px;

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

box-shadow:var(--shadow);

}

/* ==========================
Buttons
==========================*/

.actions{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:25px;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 22px;

border-radius:14px;

background:linear-gradient(135deg,#2f80ff,#5ea8ff);

color:#fff;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:0 10px 20px rgba(47,128,255,.25);

}

.btn:hover{

transform:translateY(-2px);

box-shadow:0 15px 25px rgba(47,128,255,.35);

}

.btn.success{

background:linear-gradient(135deg,#18c964,#38d97d);

}

.btn.warning{

background:linear-gradient(135deg,#f5a524,#ffbe44);

color:#111;

}

.btn.danger{

background:linear-gradient(135deg,#ff4d6d,#ff6c88);

}

/* ==========================
Flash Message
==========================*/

.flash{

padding:16px 18px;

border-radius:14px;

margin-bottom:20px;

font-weight:600;

border-left:5px solid transparent;

}

.flash.success{

background:rgba(23,201,100,.12);

border-color:#17c964;

color:#bdf6d3;

}

.flash.error{

background:rgba(255,77,109,.12);

border-color:#ff4d6d;

color:#ffd2db;

}

.flash.warning{

background:rgba(245,165,36,.12);

border-color:#f5a524;

color:#ffe7b3;

}

/* ==========================
Small Text
==========================*/

.muted{

font-size:13px;

color:var(--muted);

line-height:1.6;

}

/* ==========================
CKEditor
==========================*/

.ck-editor__editable{

min-height:550px !important;

background:#ffffff !important;

color:#222 !important;

padding:20px !important;

border-radius:0 0 12px 12px;

}

.ck-toolbar{

border-radius:12px 12px 0 0 !important;

}

.ck.ck-editor{

border-radius:12px;

overflow:hidden;

}
/* =====================================================
   WBGovHub Admin Panel CSS V2
   Part 4
   Tables + Badges + Search + Pagination
=====================================================*/

/* ==========================
Table Wrapper
==========================*/

.table-wrap{

overflow-x:auto;

border-radius:16px;

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

}

.table{

width:100%;

border-collapse:collapse;

min-width:900px;

background:var(--panel);

}

.table thead{

background:#1b2c4d;

}

.table th{

padding:16px;

text-align:left;

font-size:14px;

font-weight:700;

color:#fff;

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

white-space:nowrap;

}

.table td{

padding:15px 16px;

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

color:#dce7ff;

font-size:14px;

vertical-align:middle;

}

.table tbody tr{

transition:.25s;

}

.table tbody tr:hover{

background:#1c2d4b;

}

.table tbody tr:last-child td{

border-bottom:none;

}

/* ==========================
Badge
==========================*/

.badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:6px 12px;

border-radius:999px;

font-size:12px;

font-weight:700;

}

.badge.success{

background:rgba(23,201,100,.15);

color:#6df0a5;

}

.badge.warning{

background:rgba(245,165,36,.15);

color:#ffd36e;

}

.badge.danger{

background:rgba(255,77,109,.15);

color:#ff98ad;

}

.badge.info{

background:rgba(47,128,255,.15);

color:#8ec5ff;

}

/* ==========================
Dashboard Row
==========================*/

.dashboard-row{

display:grid;

grid-template-columns:2fr 1fr;

gap:24px;

margin-bottom:25px;

}

/* ==========================
Quick Action Buttons
==========================*/

.quick-actions{

display:grid;

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

gap:15px;

}

.quick-actions .btn{

width:100%;

}

/* ==========================
Search Box
==========================*/

.search-box{

display:flex;

gap:12px;

margin-bottom:20px;

}

.search-box input{

flex:1;

}

/* ==========================
Pagination
==========================*/

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin-top:25px;

flex-wrap:wrap;

}

.pagination a{

min-width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

background:#182846;

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

border-radius:12px;

color:#fff;

transition:.25s;

}

.pagination a:hover{

background:var(--primary);

}

.pagination a.active{

background:linear-gradient(135deg,#2f80ff,#5ea8ff);

border-color:#2f80ff;

}

/* ==========================
Statistics Widget
==========================*/

.stats-widget{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px;

margin-bottom:16px;

background:#182846;

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

border-radius:16px;

}

.stats-widget h4{

font-size:14px;

color:var(--muted);

margin-bottom:6px;

}

.stats-widget strong{

font-size:26px;

color:#fff;

}

.stats-widget .icon{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:rgba(47,128,255,.15);

font-size:24px;

}

/* ==========================
Status Box
==========================*/

.status-box{

padding:18px;

border-radius:16px;

background:#182846;

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

margin-bottom:15px;

}

.status-box h4{

margin-bottom:8px;

font-size:16px;

}

.status-box p{

color:var(--muted);

font-size:14px;

line-height:1.6;

}
/* =====================================================
   WBGovHub Admin Panel CSS V2
   Part 5
   Responsive + Animation + Final Polish
=====================================================*/

/* ==========================
Card Hover Animation
========================== */

.dashboard-card,
.panel,
.stats-widget{

transition:all .35s ease;

}

.dashboard-card:hover,
.panel:hover{

transform:translateY(-4px);

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

}

/* ==========================
Custom Scrollbar
========================== */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-track{

background:#111b2e;

}

::-webkit-scrollbar-thumb{

background:#35528a;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#4b74b7;

}

/* ==========================
Fade Animation
========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.panel,
.dashboard-card,
.stats-widget{

animation:fadeUp .45s ease;

}

/* ==========================
Image Style
========================== */

.table img{

border-radius:10px;

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

}

.avatar{

width:42px;

height:42px;

border-radius:50%;

object-fit:cover;

}

/* ==========================
Code Block
========================== */

pre{

background:#101828;

padding:18px;

border-radius:14px;

overflow:auto;

color:#9cdcfe;

}

code{

font-family:Consolas,monospace;

}

/* ==========================
Responsive
========================== */

@media(max-width:1200px){

.dashboard-row{

grid-template-columns:1fr;

}

}

/* Tablet */

@media(max-width:992px){

.sidebar{

left:-260px;

}

.sidebar.show{

left:0;

}

.admin-main{

margin-left:0;

width:100%;

}

.admin-top{

padding:15px;

}

.admin-search{

width:220px;

}

.form-grid{

grid-template-columns:1fr;

}

}

/* Mobile */

@media(max-width:768px){

.admin-content{

padding:15px;

}

.admin-title{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.admin-title h1{

font-size:24px;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.actions{

flex-direction:column;

}

.btn{

width:100%;

}

.admin-search{

display:none;

}

.table{

min-width:700px;

}

}

/* Small Mobile */

@media(max-width:480px){

.admin-top{

height:auto;

padding:12px;

}

.admin-avatar{

width:40px;

height:40px;

font-size:16px;

}

.card-body h3{

font-size:24px;

}

.dashboard-card{

padding:18px;

}

.panel{

padding:18px;

}

}

/* ==========================
Print
========================== */

@media print{

.sidebar,
.admin-top,
.btn,
.actions{

display:none!important;

}

.admin-main{

margin:0;

width:100%;

}

body{

background:#fff;

color:#000;

}

.panel{

border:1px solid #ccc;

box-shadow:none;

}

}
/* =====================================================
   WBGovHub Admin Panel CSS V2
   Part 6 (Final)
   Theme + Media + Charts + Notifications
=====================================================*/

/* ==========================
Notification Badge
========================== */

.notification-badge{

position:absolute;

top:-6px;

right:-6px;

min-width:20px;

height:20px;

padding:0 6px;

border-radius:999px;

background:#ff4d6d;

color:#fff;

font-size:11px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

}

/* ==========================
Chart Container
========================== */

.chart-box{

background:var(--panel);

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

border-radius:18px;

padding:20px;

min-height:350px;

box-shadow:var(--shadow);

}

.chart-box canvas{

width:100%!important;

height:auto!important;

}

/* ==========================
Media Library
========================== */

.media-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

gap:20px;

}

.media-item{

background:var(--panel);

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

border-radius:16px;

overflow:hidden;

transition:.3s;

}

.media-item:hover{

transform:translateY(-5px);

border-color:var(--primary);

}

.media-item img{

width:100%;

height:170px;

object-fit:cover;

}

.media-info{

padding:12px;

font-size:13px;

color:var(--muted);

}

/* ==========================
Profile Card
========================== */

.profile-card{

display:flex;

align-items:center;

gap:20px;

background:var(--panel);

padding:25px;

border-radius:18px;

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

}

.profile-card img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

border:3px solid var(--primary);

}

/* ==========================
Statistics Counter
========================== */

.counter{

font-size:34px;

font-weight:700;

color:#fff;

}

.counter-title{

font-size:14px;

color:var(--muted);

margin-top:6px;

}

/* ==========================
Modal
========================== */

.modal{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}

.modal.show{

display:flex;

}

.modal-content{

width:min(650px,95%);

background:var(--panel);

border-radius:20px;

padding:25px;

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

box-shadow:var(--shadow);

}

/* ==========================
Loader
========================== */

.loader{

width:48px;

height:48px;

border:4px solid rgba(255,255,255,.15);

border-top:4px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

/* ==========================
Footer
========================== */

.admin-footer{

margin-top:40px;

padding:20px;

text-align:center;

color:var(--muted);

font-size:13px;

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

}

/* ==========================
Dark / Light Theme Support
========================== */

body.light{

--bg:#f4f7fb;
--panel:#ffffff;
--panel2:#f7f9fc;
--card:#ffffff;

--text:#222;

--muted:#666;

--border:#dfe5ef;

}

body.light .sidebar{

background:#ffffff;

}

body.light .admin-top{

background:#ffffff;

}

body.light input,
body.light select,
body.light textarea{

background:#ffffff;

color:#222;

}

/* ==========================
Utility Classes
========================== */

.text-center{text-align:center;}
.text-right{text-align:right;}
.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mb-20{margin-bottom:20px;}
.w-100{width:100%;}
.d-flex{display:flex;}
.justify-between{justify-content:space-between;}
.align-center{align-items:center;}
.rounded{border-radius:16px;}
.shadow{box-shadow:var(--shadow);}

@media (max-width:768px){

.dashboard-row{
    display:flex !important;
    flex-direction:column !important;
    gap:20px;
}

.dashboard-row .panel{
    width:100% !important;
    max-width:100% !important;
    flex:none !important;
}

.table-wrap{
    overflow-x:auto;
}

}
/* ===== Mobile Panel Fix ===== */

@media (max-width:768px){

.panel{
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

.table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.table{
    min-width:0;
    width:100%;
}

.dashboard-row{
    display:block;
}

.dashboard-grid{
    grid-template-columns:1fr;
}

}