/*
==========================================================
RAGO ACCOUNT
SUPER ADMIN DASHBOARD
STEP 01
GLOBAL RESET + ROOT LAYOUT (DARK THEME)
==========================================================
*/

/*======================================================
Reset
======================================================*/

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

html{

	width:100%;
	height:100%;
	scroll-behavior:smooth;

}

/*======================================================
RAGO DARK VARIABLES
======================================================*/

:root{

	--rago-bg:#0b1120;
	--rago-surface:#131c2e;
	--rago-card:#1b263b;
	--rago-card-hover:#23324d;

	--rago-border:#2d3f5c;

	--rago-primary:#3b82f6;
	--rago-primary-hover:#2563eb;

	--rago-success:#22c55e;
	--rago-warning:#f59e0b;
	--rago-danger:#ef4444;

	--rago-text:#f8fafc;
	--rago-text-light:#94a3b8;
	--rago-text-muted:#64748b;

	--rago-shadow:
		0 18px 40px rgba(0,0,0,.45);

}

/*======================================================
Body
======================================================*/

body{

	width:100%;
	min-height:100vh;

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

	font-size:14px;
	line-height:1.6;

	background:var(--rago-bg);

	color:var(--rago-text);

	overflow-x:hidden;

}

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

a{

	color:inherit;

	text-decoration:none;

}

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

button{

	font:inherit;

	border:none;

	outline:none;

	background:none;

	cursor:pointer;

}

/*======================================================
Inputs
======================================================*/

input,
select,
textarea{

	font:inherit;

	color:var(--rago-text);

	outline:none;

}

/*======================================================
Images
======================================================*/

img{

	display:block;

	max-width:100%;

	height:auto;

}

/*======================================================
Lists
======================================================*/

ul,
ol{

	list-style:none;

}

/*======================================================
Dashboard Root
======================================================*/

.rago-super-admin{

	width:100%;

	min-height:100vh;

	display:flex;

	flex-direction:column;

	background:var(--rago-bg);

}

/*======================================================
Workspace
======================================================*/

.rago-admin-workspace{

	flex:1;

	display:grid;

	grid-template-columns:

		280px
		1fr;

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

	background:var(--rago-bg);

}

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

.rago-admin-sidebar{

	background:var(--rago-surface);

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

	overflow:auto;

}

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

.rago-admin-main{

	padding:30px;

	background:var(--rago-bg);

	overflow:auto;

}

/*======================================================
Dashboard Wrapper
======================================================*/

.rago-dashboard{

	width:100%;

	max-width:1700px;

	margin:auto;

	display:flex;

	flex-direction:column;

	gap:30px;

}

/*======================================================
Card Base
======================================================*/

.rago-card{

	background:var(--rago-card);

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

	border-radius:18px;

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

}

/*======================================================
Section
======================================================*/

section{

	width:100%;

}

/*======================================================
Selection
======================================================*/

::selection{

	background:var(--rago-primary);

	color:#ffffff;

}





/*
==========================================================
STEP 02
HEADER
==========================================================
*/

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

.rago-admin-header{

	height:72px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:0 30px;

	background:var(--rago-surface);

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

	box-shadow:0 4px 20px rgba(0,0,0,.25);

	position:sticky;

	top:0;

	z-index:999;

}

/*======================================================
Header Left
======================================================*/

.rago-header-left{

	display:flex;

	align-items:center;

	gap:18px;

}

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

.rago-sidebar-toggle{

	width:42px;

	height:42px;

	border-radius:10px;

	background:var(--rago-card);

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

	color:var(--rago-text);

	font-size:18px;

	transition:.25s;

}

.rago-sidebar-toggle:hover{

	background:var(--rago-primary);

	color:#ffffff;

}

/*======================================================
Logo
======================================================*/

.rago-admin-logo{

	display:flex;

	align-items:center;

}

.rago-logo-text{

	font-size:22px;

	font-weight:700;

	letter-spacing:1px;

	color:var(--rago-text);

}

/*======================================================
Header Center
======================================================*/

.rago-header-center{

	flex:1;

	display:flex;

	justify-content:center;

	padding:0 40px;

}

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

.rago-search-box{

	width:100%;

	max-width:520px;

}

.rago-search-box input{

	width:100%;

	height:46px;

	padding:0 18px;

	border-radius:12px;

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

	background:var(--rago-card);

	color:var(--rago-text);

	font-size:14px;

	transition:.25s;

}

.rago-search-box input::placeholder{

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

}

.rago-search-box input:focus{

	border-color:var(--rago-primary);

	box-shadow:0 0 0 3px rgba(59,130,246,.20);

}

/*======================================================
Header Right
======================================================*/

.rago-header-right{

	display:flex;

	align-items:center;

	gap:14px;

}

/*======================================================
Header Icons
======================================================*/

.rago-header-icon{

	width:42px;

	height:42px;

	border-radius:12px;

	display:flex;

	align-items:center;

	justify-content:center;

	background:var(--rago-card);

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

	color:var(--rago-text);

	font-size:18px;

	transition:.25s;

}

.rago-header-icon:hover{

	background:var(--rago-primary);

	color:#ffffff;

}

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

.rago-admin-profile{

	display:flex;

	align-items:center;

	gap:12px;

	padding-left:15px;

	margin-left:10px;

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

}

/*======================================================
Avatar
======================================================*/

.rago-profile-avatar{

	width:44px;

	height:44px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	background:var(--rago-primary);

	color:#ffffff;

	font-size:18px;

	font-weight:700;

}

/*======================================================
Profile Info
======================================================*/

.rago-profile-info{

	display:flex;

	flex-direction:column;

}

.rago-profile-name{

	font-size:14px;

	font-weight:700;

	color:var(--rago-text);

}

.rago-profile-role{

	font-size:12px;

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

}









/*
==========================================================
STEP 03
SIDEBAR
==========================================================
*/

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

.rago-sidebar{

	height:100%;

	display:flex;

	flex-direction:column;

	background:var(--rago-surface);

}

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

.rago-sidebar-logo{

	padding:28px 24px;

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

}

.rago-sidebar-logo h2{

	font-size:24px;

	font-weight:700;

	color:var(--rago-text);

	margin-bottom:6px;

	letter-spacing:1px;

}

.rago-sidebar-logo span{

	font-size:13px;

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

}

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

.rago-sidebar-nav{

	flex:1;

	padding:20px 16px;

	overflow-y:auto;

}

/*======================================================
Navigation Group
======================================================*/

.rago-nav-group{

	margin-bottom:28px;

}

/*======================================================
Navigation Title
======================================================*/

.rago-nav-title{

	margin-bottom:12px;

	padding:0 14px;

	font-size:11px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:1px;

	color:var(--rago-text-muted);

}

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

.rago-nav-group a{

	display:flex;

	align-items:center;

	gap:12px;

	padding:12px 14px;

	margin-bottom:6px;

	border-radius:12px;

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

	font-size:14px;

	font-weight:500;

	transition:all .25s ease;

}

/*======================================================
Hover
======================================================*/

.rago-nav-group a:hover{

	background:var(--rago-card);

	color:var(--rago-text);

	transform:translateX(4px);

}

/*======================================================
Active Item
======================================================*/

.rago-nav-item.active{

	background:var(--rago-primary);

	color:#ffffff !important;

	box-shadow:

		0 8px 22px rgba(59,130,246,.35);

}

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

.rago-sidebar-bottom{

	padding:20px;

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

}

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

#rago-admin-logout{

	display:flex;

	align-items:center;

	justify-content:center;

	width:100%;

	height:46px;

	border-radius:12px;

	background:#dc2626;

	color:#ffffff;

	font-weight:600;

	transition:.25s;

}

#rago-admin-logout:hover{

	background:#b91c1c;

	transform:translateY(-2px);

	box-shadow:0 10px 20px rgba(220,38,38,.35);

}

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

.rago-sidebar-nav::-webkit-scrollbar{

	width:8px;

}

.rago-sidebar-nav::-webkit-scrollbar-track{

	background:transparent;

}

.rago-sidebar-nav::-webkit-scrollbar-thumb{

	background:var(--rago-border);

	border-radius:20px;

}

.rago-sidebar-nav::-webkit-scrollbar-thumb:hover{

	background:var(--rago-primary);

}









/*
==========================================================
STEP 04
WELCOME SECTION
==========================================================
*/

/*======================================================
Welcome
======================================================*/

.rago-dashboard-welcome{

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:30px;

	padding:28px 34px;

	background:var(--rago-card);

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

	border-radius:18px;

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

}

/*======================================================
Title
======================================================*/

.rago-dashboard-title{

	display:flex;

	flex-direction:column;

}

.rago-dashboard-title h1{

	font-size:32px;

	font-weight:700;

	color:var(--rago-text);

	margin-bottom:8px;

	line-height:1.2;

}

.rago-dashboard-title h1 span{

	color:var(--rago-primary);

}

.rago-dashboard-title p{

	font-size:15px;

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

}

/*======================================================
Actions
======================================================*/

.rago-dashboard-actions{

	display:flex;

	align-items:center;

	gap:15px;

	flex-wrap:wrap;

}

/*======================================================
Primary Button
======================================================*/

.rago-btn-primary{

	height:46px;

	padding:0 22px;

	border:none;

	border-radius:12px;

	background:var(--rago-primary);

	color:#ffffff;

	font-size:14px;

	font-weight:600;

	cursor:pointer;

	transition:.25s;

}

.rago-btn-primary:hover{

	background:var(--rago-primary-hover);

	transform:translateY(-2px);

	box-shadow:0 10px 24px rgba(59,130,246,.35);

}

/*======================================================
Secondary Button
======================================================*/

.rago-btn-secondary{

	height:46px;

	padding:0 22px;

	border-radius:12px;

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

	background:var(--rago-surface);

	color:var(--rago-text);

	font-size:14px;

	font-weight:600;

	cursor:pointer;

	transition:.25s;

}

.rago-btn-secondary:hover{

	background:var(--rago-card-hover);

	border-color:var(--rago-primary);

	transform:translateY(-2px);

}

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

@media (max-width:900px){

	.rago-dashboard-welcome{

		flex-direction:column;

		align-items:flex-start;

	}

	.rago-dashboard-actions{

		width:100%;

	}

}









/*
==========================================================
STEP 05
STATISTICS CARDS
==========================================================
*/

/*======================================================
Statistics Grid
======================================================*/

.rago-dashboard-stats{

	display:grid;

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

	gap:24px;

}

/*======================================================
Stat Card
======================================================*/

.rago-stat-card{

	display:flex;

	align-items:center;

	gap:20px;

	padding:24px;

	background:var(--rago-card);

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

	border-radius:18px;

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

	transition:.30s;

}

/*======================================================
Hover
======================================================*/

.rago-stat-card:hover{

	transform:translateY(-6px);

	background:var(--rago-card-hover);

	border-color:var(--rago-primary);

}

/*======================================================
Icon
======================================================*/

.rago-stat-icon{

	width:68px;

	height:68px;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:28px;

	border-radius:16px;

	background:rgba(59,130,246,.12);

	border:1px solid rgba(59,130,246,.30);

}

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

.rago-stat-content{

	flex:1;

}

/*======================================================
Title
======================================================*/

.rago-stat-content h3{

	font-size:14px;

	font-weight:500;

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

	margin-bottom:8px;

}

/*======================================================
Value
======================================================*/

.rago-stat-content h2{

	font-size:32px;

	font-weight:700;

	color:var(--rago-text);

	line-height:1.1;

	margin-bottom:8px;

}

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

.rago-stat-content span{

	font-size:13px;

	color:var(--rago-success);

	font-weight:600;

}

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

@media(max-width:1200px){

	.rago-dashboard-stats{

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

	}

}

@media(max-width:768px){

	.rago-dashboard-stats{

		grid-template-columns:1fr;

	}

}










/*
==========================================================
STEP 06
CHARTS
==========================================================
*/

/*======================================================
Charts Grid
======================================================*/

.rago-dashboard-charts{

	display:grid;

	grid-template-columns:

		2fr
		1fr;

	gap:24px;

}

/*======================================================
Large Chart
======================================================*/

.rago-chart-large{

	background:var(--rago-card);

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

	border-radius:18px;

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

	overflow:hidden;

	min-height:380px;

	display:flex;

	flex-direction:column;

}

/*======================================================
Small Chart
======================================================*/

.rago-chart-small{

	background:var(--rago-card);

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

	border-radius:18px;

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

	overflow:hidden;

	min-height:380px;

	display:flex;

	flex-direction:column;

}

/*======================================================
Card Header
======================================================*/

.rago-card-header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:22px 26px;

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

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

}

/*======================================================
Card Title
======================================================*/

.rago-card-header h3{

	font-size:18px;

	font-weight:700;

	color:var(--rago-text);

}

/*======================================================
Chart Placeholder
======================================================*/

.rago-chart-placeholder{

	flex:1;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:15px;

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

	background:

		repeating-linear-gradient(

			45deg,

			rgba(255,255,255,.02),

			rgba(255,255,255,.02) 18px,

			transparent 18px,

			transparent 36px

		);

}

/*======================================================
Hover
======================================================*/

.rago-chart-large:hover,
.rago-chart-small:hover{

	border-color:var(--rago-primary);

	transform:translateY(-4px);

	transition:.25s;

}

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

@media(max-width:1200px){

	.rago-dashboard-charts{

		grid-template-columns:1fr;

	}

}










/*
==========================================================
STEP 07
RECENT ACTIVITY
==========================================================
*/

/*======================================================
Activity Grid
======================================================*/

.rago-dashboard-activity{

	display:grid;

	grid-template-columns:

		1fr
		1fr;

	gap:24px;

}

/*======================================================
Activity Card
======================================================*/

.rago-activity-card{

	background:var(--rago-card);

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

	border-radius:18px;

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

	overflow:hidden;

	transition:.25s;

}

.rago-activity-card:hover{

	border-color:var(--rago-primary);

	transform:translateY(-4px);

}

/*======================================================
Card Body
======================================================*/

.rago-card-body{

	padding:20px 26px;

}

/*======================================================
Activity List
======================================================*/

.rago-list{

	display:flex;

	flex-direction:column;

	gap:10px;

}

/*======================================================
List Item
======================================================*/

.rago-list li{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:14px 16px;

	border-radius:12px;

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

	border:1px solid transparent;

	color:var(--rago-text);

	font-size:14px;

	transition:.25s;

}

/*======================================================
Hover
======================================================*/

.rago-list li:hover{

	background:var(--rago-card-hover);

	border-color:var(--rago-primary);

	transform:translateX(4px);

}

/*======================================================
Time
======================================================*/

.rago-list li span{

	font-size:12px;

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

	white-space:nowrap;

	margin-left:20px;

}

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

@media(max-width:1000px){

	.rago-dashboard-activity{

		grid-template-columns:1fr;

	}

}



















/*
==========================================================
STEP 08
QUICK ACTIONS
==========================================================
*/

.rago-dashboard-actions{

	background:var(--rago-card);

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

	border-radius:18px;

	padding:28px;

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

}

.rago-dashboard-actions .rago-card-header{

	margin-bottom:24px;

	padding-bottom:18px;

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

}

.rago-action-grid{

	display:grid;

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

	gap:18px;

}

.rago-action-btn{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	height:110px;

	padding:18px;

	background:var(--rago-surface);

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

	border-radius:14px;

	cursor:pointer;

	transition:all .25s ease;

}

.rago-action-btn:hover{

	background:var(--rago-primary);

	border-color:var(--rago-primary);

	transform:translateY(-4px);

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

}

.rago-action-icon{

	width:52px;

	height:52px;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:24px;

	border-radius:12px;

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

	color:var(--rago-primary);

	margin-bottom:12px;

	transition:.25s;

}

.rago-action-btn:hover .rago-action-icon{

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

	color:#fff;

}

.rago-action-text{

	display:flex;

	flex-direction:column;

	align-items:center;

	text-align:center;

}

.rago-action-text strong{

	font-size:14px;

	font-weight:600;

	color:var(--rago-text);

	line-height:1.3;

}

.rago-action-btn:hover .rago-action-text strong{

	color:#fff;

}

.rago-action-text small{

	display:none;

}

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

@media(max-width:1400px){

	.rago-action-grid{

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

	}

}

@media(max-width:900px){

	.rago-action-grid{

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

	}

}

@media(max-width:600px){

	.rago-action-grid{

		grid-template-columns:1fr;

	}

}












/*
==========================================================
STEP 09
SYSTEM HEALTH
==========================================================
*/

/*======================================================
System Health
======================================================*/

.rago-dashboard-system{

	background:var(--rago-card);

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

	border-radius:18px;

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

	padding:28px;

}

/*======================================================
Health Grid
======================================================*/

.rago-system-grid{

	display:grid;

	grid-template-columns:

		repeat(auto-fit,minmax(240px,1fr));

	gap:20px;

	margin-top:24px;

}

/*======================================================
System Item
======================================================*/

.rago-system-item{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:18px 20px;

	background:var(--rago-surface);

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

	border-radius:14px;

	transition:.25s;

}

/*======================================================
Hover
======================================================*/

.rago-system-item:hover{

	background:var(--rago-card-hover);

	border-color:var(--rago-primary);

	transform:translateY(-4px);

}

/*======================================================
Label
======================================================*/

.rago-system-item span{

	font-size:14px;

	font-weight:600;

	color:var(--rago-text);

}

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

.rago-system-item strong{

	font-size:13px;

	font-weight:700;

	padding:7px 12px;

	border-radius:30px;

}

/*======================================================
ONLINE
======================================================*/

.rago-system-item .online{

	background:rgba(34,197,94,.15);

	color:#22c55e;

	border:1px solid rgba(34,197,94,.35);

}

/*======================================================
WARNING
======================================================*/

.rago-system-item .warning{

	background:rgba(245,158,11,.15);

	color:#f59e0b;

	border:1px solid rgba(245,158,11,.35);

}

/*======================================================
OFFLINE
======================================================*/

.rago-system-item .offline{

	background:rgba(239,68,68,.15);

	color:#ef4444;

	border:1px solid rgba(239,68,68,.35);

}

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

@media(max-width:768px){

	.rago-system-grid{

		grid-template-columns:1fr;

	}

}
















/*
==========================================================
STEP 10
FOOTER + SCROLLBAR + ANIMATIONS
==========================================================
*/

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

.rago-admin-footer{

	height:60px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:0 30px;

	background:var(--rago-surface);

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

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

	font-size:13px;

}

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

.rago-footer-left{

	font-weight:500;

}

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

.rago-footer-center{

	display:flex;

	align-items:center;

	justify-content:center;

}

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

.rago-status-badge{

	display:inline-flex;

	align-items:center;

	padding:6px 14px;

	border-radius:30px;

	background:rgba(34,197,94,.15);

	border:1px solid rgba(34,197,94,.30);

	color:#22c55e;

	font-size:12px;

	font-weight:600;

}

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

.rago-footer-right{

	font-weight:500;

}

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

::-webkit-scrollbar{

	width:10px;

	height:10px;

}

::-webkit-scrollbar-track{

	background:var(--rago-bg);

}

::-webkit-scrollbar-thumb{

	background:var(--rago-border);

	border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

	background:var(--rago-primary);

}

/*======================================================
Selection
======================================================*/

::selection{

	background:var(--rago-primary);

	color:#ffffff;

}

/*======================================================
Smooth Animation
======================================================*/

.rago-admin-header,
.rago-sidebar,
.rago-stat-card,
.rago-chart-large,
.rago-chart-small,
.rago-activity-card,
.rago-action-btn,
.rago-system-item,
.rago-admin-footer{

	transition:all .30s ease;

}

/*======================================================
Focus
======================================================*/

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

	outline:none;

}

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

.text-success{

	color:#22c55e;

}

.text-warning{

	color:#f59e0b;

}

.text-danger{

	color:#ef4444;

}

.text-primary{

	color:var(--rago-primary);

}













/*
==========================================================
STEP 11
RESPONSIVE DESIGN
==========================================================
*/

/*======================================================
Large Desktop
======================================================*/

@media (min-width:1600px){

	.rago-dashboard{

		max-width:1800px;

	}

}

/*======================================================
Laptop
======================================================*/

@media (max-width:1400px){

	.rago-admin-main{

		padding:25px;

	}

	.rago-dashboard{

		gap:24px;

	}

}

/*======================================================
Tablet Landscape
======================================================*/

@media (max-width:1200px){

	.rago-admin-workspace{

		grid-template-columns:

			240px
			1fr;

	}

	.rago-dashboard-stats{

		grid-template-columns:

			repeat(2,1fr);

	}

	.rago-dashboard-charts{

		grid-template-columns:1fr;

	}

}

/*======================================================
Tablet
======================================================*/

@media (max-width:992px){

	.rago-admin-header{

		padding:0 20px;

	}

	.rago-header-center{

		display:none;

	}

	.rago-admin-workspace{

		grid-template-columns:1fr;

	}

	.rago-admin-sidebar{

		position:fixed;

		left:-280px;

		top:72px;

		width:280px;

		height:calc(100vh - 72px);

		z-index:999;

		transition:.30s;

	}

	.rago-admin-sidebar.active{

		left:0;

	}

	.rago-admin-main{

		padding:20px;

	}

}

/*======================================================
Mobile
======================================================*/

@media (max-width:768px){

	.rago-dashboard-welcome{

		flex-direction:column;

		align-items:flex-start;

	}

	.rago-dashboard-actions{

		width:100%;

		flex-wrap:wrap;

	}

	.rago-dashboard-stats{

		grid-template-columns:1fr;

	}

	.rago-dashboard-activity{

		grid-template-columns:1fr;

	}

	.rago-system-grid{

		grid-template-columns:1fr;

	}

	.rago-action-grid{

		grid-template-columns:

			repeat(2,1fr);

	}

	.rago-admin-footer{

		flex-direction:column;

		justify-content:center;

		gap:6px;

		height:auto;

		padding:15px;

		text-align:center;

	}

}

/*======================================================
Small Mobile
======================================================*/

@media (max-width:480px){

	.rago-admin-header{

		padding:0 15px;

	}

	.rago-logo-text{

		font-size:18px;

	}

	.rago-profile-info{

		display:none;

	}

	.rago-dashboard-title h1{

		font-size:24px;

	}

	.rago-action-grid{

		grid-template-columns:1fr;

	}

	.rago-btn-primary,
	.rago-btn-secondary{

		width:100%;

	}

}

















/*
==========================================================
STEP 12
FINAL POLISH
==========================================================
*/

/*======================================================
Smooth Transition
======================================================*/

*{

	transition:

		background-color .25s ease,
		border-color .25s ease,
		color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;

}

/*======================================================
Glass Effect
======================================================*/

.rago-stat-card,
.rago-chart-large,
.rago-chart-small,
.rago-activity-card,
.rago-dashboard-actions,
.rago-dashboard-system,
.rago-dashboard-welcome{

	backdrop-filter:blur(14px);

	-webkit-backdrop-filter:blur(14px);

}

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

.rago-stat-card:hover,
.rago-chart-large:hover,
.rago-chart-small:hover,
.rago-activity-card:hover,
.rago-dashboard-actions:hover,
.rago-dashboard-system:hover{

	box-shadow:

		0 25px 50px rgba(0,0,0,.35);

}

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

.rago-btn-primary,
.rago-btn-secondary,
.rago-action-btn{

	will-change:transform;

}

.rago-btn-primary:hover,
.rago-btn-secondary:hover,
.rago-action-btn:hover{

	transform:

		translateY(-4px)
		scale(1.02);

}

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

input,
select,
textarea{

	transition:.25s;

}

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

	box-shadow:

		0 0 0 4px rgba(59,130,246,.15);

}

/*======================================================
Header Blur
======================================================*/

.rago-admin-header{

	backdrop-filter:blur(18px);

	-webkit-backdrop-filter:blur(18px);

}

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

.rago-nav-group a{

	position:relative;

	overflow:hidden;

}

.rago-nav-group a::before{

	content:"";

	position:absolute;

	left:0;

	top:0;

	width:0;

	height:100%;

	background:

		rgba(59,130,246,.12);

	transition:.25s;

}

.rago-nav-group a:hover::before{

	width:100%;

}

/*======================================================
Status Glow
======================================================*/

.online{

	box-shadow:

		0 0 12px rgba(34,197,94,.25);

}

.warning{

	box-shadow:

		0 0 12px rgba(245,158,11,.25);

}

.offline{

	box-shadow:

		0 0 12px rgba(239,68,68,.25);

}

/*======================================================
Dashboard Animation
======================================================*/

@keyframes ragoFade{

	from{

		opacity:0;

		transform:translateY(12px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

.rago-dashboard>*{

	animation:ragoFade .45s ease;

}

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

.rago-admin-footer{

	backdrop-filter:blur(10px);

}

/*======================================================
End
======================================================*/