* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: arial, sans-serif;
  overflow: hidden;
}

/* === App Loader Overlay === */
#app-loader {
  position: fixed;
  inset: 0;
  background: #000000; /* matches your app tone */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner */
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Ring */
.loader-ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #00b4ff;
  animation: spin 0.9s linear infinite;
}

/* Text */
.loader-text {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.7);
}

/* Spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Fade out */
#app-loader.fade-out {
  animation: fadeOut 0.45s ease forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* === Network Status Toast === */
.network-toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #102a43;
  color: #fff;
  padding: 10px 14px;
  border-radius: 0px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 9998;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Status Dot */
.network-toast .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d4f;
}

/* Online variant */
.network-toast.online {
  background: #0f5132;
}

.network-toast.online .dot {
  background: #28c76f;
}

/* Hidden */
.network-toast.hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}


/* === MAIN LAYOUT === */
.app-layout {
  display: grid;
  grid-template-columns: 18% 1fr 18%;
  min-height: 100vh;
  background: #fff;
}

/* === LEFT NAV === */
.left-nav {
  background: #000;
  color: #fff;
  padding: 16px;
}

/* === RIGHT NAV === */
.right-nav {
  background: #000;
  padding: 16px;
}

/* === CENTER CONTENT === */
.main-content {
  background: #ffffff;
  padding: 24px;
  height: calc(100vh - 0px);
  width:780px;
  margin:0 auto;
  overflow-y: auto;
  overflow-x:hidden;
}

/* === LARGE SCREENS === */
@media (min-width: 1600px) {
  .app-layout {
    grid-template-columns: 16% 1fr 16%;
  }
}

/* === MEDIUM SCREENS === */
@media (max-width: 1200px) {
  .app-layout {
    grid-template-columns: 20% 1fr 20%;
  }
}

/* === SMALL SCREENS === */
@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .left-nav,
  .right-nav {
    display: none;
  }
}
/* === RIGHT NAV PANEL === */
.right-nav-panel {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: -20px;
}

/* === BUTTON STYLE === */
.right-nav-btn {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #b8c7d9;
  border-radius: 0px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  margin-top: -20px;
  margin-bottom: 25px;
  transition: all 0.2s ease;
}

/* Hover */
.right-nav-btn:hover {
  background: #e9f1fb;
  border-color: #103049;
	font-weight: 600;
}

/* Active / Selected */
.right-nav-btn.active {
  color: #fff;
  border-color: #fff;
  font-weight: 600;
  background-color: #000;
  margin-bottom: 2px;
}

/* Prevent text overflow */
.right-nav-btn {
  line-height: 1.3;
  word-break: break-word;
}

/* MODERN SCROLLBAR FOR YOUR MODAL */
.modal-box {
  scrollbar-width: thin;
  scrollbar-color: #5a6775 #cdd6df; /* Firefox */
}

.modal-box::-webkit-scrollbar {
  width: 6px;
}

.modal-box::-webkit-scrollbar-track {
  background: #cdd6df; /* soft gray-blue */
  border-radius: 10px;
}

.modal-box::-webkit-scrollbar-thumb {
  background: #5a6775; /* deep steel gray */
  border-radius: 12px;
}

.modal-box::-webkit-scrollbar-thumb:hover {
  background: #495463; /* darker hover for premium feel */
}

.app { 
	display:flex; 
}

.sidebar { 
	display: flex;
	flex-direction: column;
	height:auto; 
	color:#fff;
	padding:0px; 
	box-sizing:border-box; 
}

.sidebar h2 { 
	margin-top:0; 
}

.sidebar ul { 
	list-style:none; 
	padding:0; 
}

.sidebar li { 
	margin:10px 0; 
}
.sidebar li img { 
	width: 60%; 
	height: auto;
	margin-top: -20px;
}
.sidebar .logo {
  display: flex;
  justify-content: flex-end; /* 👉 right align */
  padding-right: 8px;
}
.version-id {
  display: flex;
  justify-content: flex-end; /* 👉 right align */
  padding-right: 8px;
  color: #0582d2;
  font-size: 14px;
  padding-top: 20px;
  margin-top: auto;
  position: absolute;
  right: 10px;
  bottom: 0;
}
.sidebar ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
}
.sidebar ul li:hover i {
  color: #ffd500;
}
.sidebar i {
  color: #e6eaf0;
  width: 16px;
  height: 16px;
  stroke-width: 0.7;
}

.sidebar a { 
	color:#fff; 
	text-decoration:none; 
	font-size:16px; 
	padding:0px 0px; 
	display:block; 
	border-radius:0px; transition:0.25s ease; 
	font-size: 16px;
    border: 1px solid #fff;
}

.sidebar a:hover { 
  background: #e9f1fb;
  border-color: #103049;
  font-weight: 600;
  color:#000;
}

.content { 
	margin-left:230px; 
	padding:10px; 
	width:calc(100% - 230px); 
	height:100vh; background:#f5f5f7; 
	box-sizing:border-box; 
}

@media(max-width:768px){
	.sidebar{width:200px
	}
	.content{
	margin-left:200px;
	width:calc(100%-200px);
	}
}

@media(max-width:600px){
	.sidebar{
	left:-250px
	}
	
	.content{
	margin-left:0;
	width:100%;
	}
}
.modal { 
	display:none; 
	width:100%; 
	min-height:100vh; position:fixed; 
	inset:0;
	justify-content: center;
	align-items: center;
    z-index: 9999;
	padding-top:7px; 
	left: 0%;
	top: 2%;
	box-sizing:border-box; 
}

.modal-box { 
  width:685px; 
  max-width:95%; 
  margin:0 auto; 
  background:#99b4d1; 
  color: #fff;
  border-radius:0px; 
  padding:25px; 
  box-shadow: -10px 0 0px -5px rgba(255, 223, 0, 0.7), 0 10px 25px rgba(0,0,0,0.1);
  position: relative; 
  animation: slideDown 0.35s ease; 
  cursor: grab;
  left: 0.5%;
  z-index: 9999;
  max-height: 93vh;   /* Prevents it from going off screen */
  overflow-y: auto;   /* Enables vertical scrolling */
  overflow-x: hidden; /* Keep it clean */
}

.modal-box:active { 
	cursor: grabbing; 
}

.modal-box:active {
  cursor: grabbing;
}


.modal-section-header {
  width: 110%;
  margin-left: -25px;
  background:#000; 
  font-size: 16px;
  font-weight: 600;
  padding:14px 25px 14px 25px; 
  border-radius:0px; 
  text-align:left; 
  margin-top: -25px;
  color: #f0f0f0;
}

.close-btn { 
	position:absolute; 
	top:6px; 
	right:12px; background:transparent; border:none; 
	font-size:25px; 
	font-weight: 300;
	cursor:pointer; 
	color: rgba(255, 223, 0);
}
/* Panel styling */
.panel {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 25px;
  border-left: 4px solid #ffca28;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.panel-body {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

input, select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #bbb;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 900px) {
  .dashboard-layout { flex-direction: column; }

  .sidebar-fixed {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .main-area {
    padding: 15px;
  }

  .grid-3, .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}


@keyframes slideDown { from{opacity:0; transform:translateY(-40px);
	} 
	to{opacity:1; transform:translateY(0);
	} 
}
.accordion { 
	margin-top:20px; 
}

.accordion-header { 
	width:100%; 
	background:#f0f0f0; 
	border:none; 
	padding:14px 18px; 
	text-align:left; 
	font-size:16px; 
	font-weight: 600;
	cursor:pointer; 
	border-radius:0px; 
	margin-bottom:10px; display:flex; 
	justify-content:space-between; align-items:center; 
	box-shadow:5px 3px 0px rgba(0,0,0,0.06); transition:background 0.2s ease; 
}

.accordion-header:hover { 		     background:#eeeeee; 
}

.chevron { 
	font-size:18px; transition:transform 0.25s ease; }

.accordion-item.active .chevron { transform:rotate(90deg); 
}

.accordion-content { 
	max-height:0; 
	overflow:hidden; 
	background:#f0f0f0; 
	color:#000;
	border-radius:0px; 
	padding:0 18px;
	margin-top:-5px;
	box-shadow:0 6px 12px rgba(0,0,0,0.06); transition:max-height 0.35s ease, padding 0.35s ease; 
}

.accordion-item.active .accordion-content { 
	padding:18px; 
	max-height:1200px; 
	margin-top: -20px;
	margin-bottom: 10px;
	border-radius:0px; 
}

.nested-list { 
	margin:15px 0 0 0; 
	padding-left:20px; 
}

.nested-list li { 
	list-style:circle; 
	margin:6px 0; 
	color:#444; 
	font-size:15px; 
}

form input, form select { 
	width:90%; 
	padding:8px; 
	margin-top:4px; 
	box-sizing:border-box; 
}

form button { 
	padding:10px 18px; background:#111; 
	color:#fff; 
	border:none; 
	border-radius:6px; cursor:pointer;
	margin-top:12px;
	transition:0.2s ease; 
}

form button:hover { 
	opacity:0.8;
}
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  width: 100%;
}
.form-header{
	color: #900;
	margin-top: -20px;
	padding: 6px 12px;
}
.form-btn-add {
  display: block;
  align-items: center;
  margin: 5px 40px;
  width: auto;
  color: #fff;
  float: left;
  font-size: 14px;
  padding: 10px;
  background-color: #900;
  cursor: pointer;
}

.form-row input.form-check {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.form-row input.form-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 0px;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
}

.form-row input.form-input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74,144,226,0.2);
}

@media (max-width: 500px) {
  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-row input.form-input {
    width: 100%;
  }
}

