/*!
Theme Name: Metropolis child
Theme URI: http://underscores.me/
Author: Invictus Studio
Author URI: http://invictusstudio.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: metropolis
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alpha is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
  overflow-x: hidden;
  line-height: 1.5;
  color: #000;
}

ul {
  padding: 0;
  margin: 0;
}

.section {
  padding: 50px 0;
}

a {
  text-decoration: none !important;
  transition: 0.5s ease !important;
}

a,
input,
button {
  outline: 0 !important;
}

.post,
.page {
  margin: 0;
}

body,
p {
  font-weight: 400;
  color: #000;
  font-family: "Poppins" !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: "Athena" !important;
}

.home .entry-title {
  display: none;
}

ul li,
li {
  list-style: none;
}

.skip-link.screen-reader-text {
  display: none;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: inherit;
  opacity: 1;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: inherit;
  opacity: 1;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
  opacity: 1;
}

#sidebar {
  display: none;
}

.entry-footer {
  clear: both;
}

#colophon {
  clear: both;
}

/* 404 - NOT FOUND PAGE */

.error-404.not-found {
  text-align: center;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  position: relative;
  background-image: url(/wp-content/uploads/2020/10/404.jpg);
  background-size: cover;
}

.not_found_inner {
  max-width: 69.5%;
}

.error404 #masthead,
.error404 #colophon {
  display: none;
}

.logo a {
  outline: 0 !important;
}

.error-404.not-found .logo {
  padding: 0;
  background-color: transparent;
}

.error-404.not-found h1 {
  font-size: 200px;
  line-height: 1;
  color: #404040;
  margin: 30px 0;
  font-weight: 800;
}

.error-404.not-found h1 span {
  color: #e01e26;
}

.page-header h3 {
  color: #000;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 40px;
}

.page-header p {
  font-size: 22px !important;
  color: #000;
  margin-bottom: 20px;
}

.page-content .return_home {
  background-color: #e01e26;
  color: #fff;
  padding: 20px 50px;
  display: inline-block;
  font-size: 20px;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  border: 2px solid #e01e26;
}

.page-content .return_home:hover {
  transform: translateY(-3px);
  background-color: transparent;
  color: #000;
  transform: scale(1.1);
}

/* 404 - NOT FOUND PAGE ENDS */

/*SEARCH RESULTS - NO RESULTS CSS */

.search-results article.product,
.search-results article.page {
  display: none;
}

.search-results .page-title span::before,
.search-results .page-title span::after {
  content: '"';
}

.search-results .page-title {
  font-weight: bold;
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
}

.search-results .page-header {
  width: 100%;
}

.search-results #primary {
  display: flex;
  flex-wrap: wrap;
}

.search-results #primary article {
  width: 30%;
  margin: 0 1.5%;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  padding-top: 0;
  margin-bottom: 35px;
  border-radius: 6px;
}

.search-results #primary article a.post-thumbnail {
  display: block;
  margin-left: -20px;
  margin-right: -20px;
}

.search-results #primary article a.post-thumbnail img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.search-results #primary article .entry-title a {
  display: block;
  color: #000;
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
}

.no-results.not-found {
  text-align: center;
  margin-bottom: 50px;
}

.no-results.not-found .search-form input.search-field {
  height: 45px;
  padding-left: 10px;
  border: 1px solid #eee;
  background-color: #eee;
  color: #333;
  font-size: 14px;
  width: 250px;
}

.no-results.not-found .search-form .search-submit {
  height: 45px;
  padding: 0 30px;
  border: 0;
  background-color: #0b204d;
  color: #fff;
  cursor: pointer;
}

.no-results.not-found .search-form .search-submit:hover {
  background-color: #252525;
}

.no-results.not-found .search-form label span {
  display: none;
  width: 0;
}

/*SEARCH RESULTS - NO RESULTS CSS ENDS*/

/* Modal box CSS*/

.modal {
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: #fff !important;
  border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

/* .modal-footer {
  display: none !important;
} */
.modal-header {
  border-bottom: 0px !important;
  padding: 10px;
}

.close {
  color: #000 !important;
  opacity: 1 !important;
  border: 1px solid #fff !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: #fff !important;
  padding: 0 !important;
  float: left !important;
  margin: 0 !important;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 400 !important;
}

.modal-dialog {
  max-width: 650px !important;
  margin: 25px auto !important;
}

.close span {
  display: block;
  color: #fff;
  position: absolute;
  left: 120%;
  top: 0;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  height: 50px !important;
}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  padding: 15px 15px 15px 40px !important;
}

.dgwt-wcas-details-main-image img {
  max-height: 200px !important;
}

.dgwt-wcas-suggestion-selected {
  background-color: #0b204d;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-st {
  color: #fff;
}

.dgwt-wcas-suggestion-selected .dgwt-wcas-sp {
  color: #fff;
}

.dgwt-wcas-pd-addtc .add_to_cart_inline {
  margin-left: 20px;
}

.asl_nores {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.results .asl_nores .asl_keyword {
  padding: 5px 0px !important;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  border-top: 1px solid #eee;
}

.asl_nores_header {
  margin-bottom: 10px !important;
}

/*  Modal CSS ENDS */

@media (min-width: 1200px) {
  .container {
    max-width: 1170px !important;
  }
}

@media (min-width: 1250px) {
  .container {
    max-width: 1240px !important;
  }
}

@media (max-width: 767px) {

  .mm,
  #mm {
    display: block;
  }

  #primary-menu {
    display: none;
  }
}

header#masthead,
footer#colophon {
  display: none;
}

:root {
  --primary-color: #03337e;
  --secondary-color: #4dbae0;
  --sidebar-width: 300px;
  --text-dark: #333;
  --text-light: #666;
  --border-color: #e0e0e0;
  --bg-light: #f5f7fa;
  --white: #fff;
}

.login_page {
  background-image: url("images/login_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.login_page>div {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 100px;
  justify-content: end;
}

.blur_box {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
}

.login_page .blur_box .login_logo {
  margin-bottom: 25px;
  text-align: center;
}

.login_page .blur_box .content h1 {
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 20px;
}

.input_fields input {
  background: transparent;
  border: 1px solid #fff;
  box-shadow: none;
  padding: 10px 20px;
  border-radius: 20px;
}

.login_page .input_fields label,
.login_page .input_fields input,
.login_page .input_fields input::placeholder {
  color: #fff;
}

.input_fields {
  margin-bottom: 20px;
}

.input_fields label {
  display: block;
  font-weight: 400;
  font-size: 12px;
  line-height: 120%;
  color: #000;
}

.input_fields input {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  line-height: 120%;
  width: 90%;
  outline: 0;
}

.input_fields input::placeholder {
  color: #000;
}

.forget_link {
  margin-bottom: 20px;
  display: inline-block;
  font-size: 14px;
  color: #fff;
}

.forget_link:hover {
  color: var(--primary-color);
}

button.blue_btns {
  display: block;
  margin: auto;
  background: var(--primary-color);
  color: #fff;
  padding: 10px 40px;
  border-radius: 30px;
  font-size: 16px;
}

button.blue_btns:hover {
  background: var(--secondary-color);
}

/* DASHBOARD LAYOUT */

body.page-template-dashboard {
  background-color: #e8e8e8;
}

.dashboard_wrapper {
  display: flex;
  min-height: 100vh;
  background-color: #e8e8e8;
}

/* SIDEBAR STYLING */

.dashboard_sidebar {
  width: var(--sidebar-width);
  background: #fafafa;
  color: var(--white);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar_header {
  padding: 25px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: relative;
}

.logo_section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.sidebar_logo {
  max-width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.sidebar_toggle {
  background: rgba(77, 186, 224, 0.2);
  border: 1px solid rgba(77, 186, 224, 0.5);
  color: var(--secondary-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.sidebar_toggle:hover {
  background: rgba(77, 186, 224, 0.3);
  border-color: var(--secondary-color);
}

.sidebar_toggle svg {
  transition: transform 0.3s ease;
}

.dashboard_sidebar.collapsed .sidebar_toggle svg {
  transform: scaleX(-1);
}

.sidebar_menu {
  padding: 20px 0;
  transition: all 0.3s ease;
}

.dashboard_sidebar.collapsed .menu_section_label {
  opacity: 0;
  padding: 15px 0 10px 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.menu_list {
  list-style: none;
}

.menu_item {
  margin: 10px 0;
  transition: all 0.3s ease;
}

.menu_link {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.3s ease;
  gap: 15px;
  border-radius: 8px;
  margin: 5px 10px;
}

.menu_link:hover,
.menu_item.active .menu_link {
  background: linear-gradient(135deg, var(--secondary-color) 0%, #3aa8d1 100%);
  color: var(--white);
  padding-left: 25px;
}

.menu_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--secondary-color);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.menu_link:hover .menu_icon,
.menu_item.active .menu_link .menu_icon {
  color: var(--white);
}

.menu_text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* COLLAPSED SIDEBAR STATE */

.dashboard_sidebar.collapsed {
  width: 80px;
}

.dashboard_sidebar.collapsed .logo_section {
  max-width: 50px;
  display: none;
}

.dashboard_sidebar.collapsed .sidebar_logo {
  max-width: 100%;
  opacity: 0;
  height: 0;
  width: 0;
}

.dashboard_sidebar.collapsed .menu_text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  display: none;
}

.dashboard_sidebar.collapsed .menu_link {
  padding: 15px;
  justify-content: center;
  margin: 5px 8px;
  border-radius: 12px;
}

.dashboard_sidebar.collapsed .menu_link:hover,
.dashboard_sidebar.collapsed .menu_item.active .menu_link {
  padding: 15px;
  padding-left: 15px;
}

.dashboard_main.sidebar-collapsed {
  margin-left: 80px;
}

/* MAIN DASHBOARD CONTENT */

.dashboard_main {
  flex: 1;
  margin-left: var(--sidebar-width);
  background-color: #e8e8e8;
  transition: margin-left 0.3s ease;
  overflow: hidden;
}

.dashboard_sidebar.collapsed~.dashboard_main {
  margin-left: 80px;
}

/* HEADER STYLING */

.dashboard_header {
  background-color: #f0f0f0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header_container {
  max-width: 100%;
  padding: 12px 20px;
}

.header_content {
  display: grid;
  grid-template-columns: 50% 26% 20%;
  align-items: center;
  gap: 20px;
}

.header_left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page_nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav_icon {
  color: var(--primary-color);
  opacity: 0.9;
}

.page_title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}

.header_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_box.centered {
  width: 520px;
  max-width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 30px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search_input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 14px;
  color: var(--text-dark);
  padding: 8px 10px;
}

.search_input::placeholder {
  color: #999;
}

.search_btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #999;
  padding: 6px;
}

.search_btn:hover {
  color: var(--primary-color);
}

.header_right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header_profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification_badge {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  color: var(--text-light);
  transition: color 0.3s ease;
}

.notification_badge:hover {
  color: var(--primary-color);
}

.profile_section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--secondary-color);
}

.profile_info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.profile_name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
}

.profile_role {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 400;
}

.profile_dropdown {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
}

/* small profile label shown to the left of avatar in header */
.profile_label {
  font-size: 13px;
  color: var(--text-dark);
  text-align: right;
  line-height: 1.05;
}

@media (max-width: 768px) {
  .profile_label {
    display: none;
  }

  .search_box.centered {
    width: 100%;
  }
}

/* DASHBOARD CONTENT - removed (moved to template or not needed) */

/* .dashboard_content and .content_container styles removed per request */

/* STATISTICS CARDS */

.stats_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}

.stat_card {
  background-color: var(--white);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.stat_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stat_icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.total_logs .stat_icon {
  background-color: rgba(3, 51, 126, 0.1);
  color: var(--primary-color);
}

.negative_logs .stat_icon {
  background-color: rgba(77, 186, 224, 0.1);
  color: var(--secondary-color);
}

.positive_logs .stat_icon {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.stat_content {
  flex: 1;
}

.stat_label {
  font-size: 12px;
  color: var(--text-light);
  margin: 0 0 5px 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.stat_value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px 0;
}

.stat_change {
  font-size: 13px;
  margin: 0;
  color: var(--text-light);
}

.stat_change.positive {
  color: #52c41a;
  font-weight: 500;
}

.dashboard {
  padding: 40px;
}

.heading h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  color: #252525;
}

.heading p {
  margin-top: 8px;
  color: #252525;
  font-size: 14px;
}

.cards {
  display: flex;
  gap: 25px;
  margin-top: 30px;
}

.card {
  flex: 1;
  background: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 20px;
  padding: 25px;
  transition: 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--secondary-color);
  background: transparent !important;
  padding: 10px 0 !important;
}

.card-header i {
  font-size: 16px;
  color: var(--primary-color);
}

.card h2 {
  font-size: 42px;
  margin: 20px 0 10px;
  font-weight: 600;
  color: #111827;
}

.growth {
  font-size: 14px;
  color: #252525;
}

/* User Management Module Styles */

.user_management {
  padding: 20px;
}

.user_management .heading {
  margin-bottom: 30px;
}

.user_management .heading h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.user_management .heading p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Search and Add User Section */
.search_add_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.search_box {
  flex: 1;
  max-width: 250px;
}

.search_add_wrapper .search_box input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease;
}

.search_add_wrapper .search_box input:focus {
  outline: none;
  border-color: #007bff;
  background-color: #fff;
}

.search_add_wrapper .search_box input::placeholder {
  color: #999;
}

.add_user_btn {
  padding: 10px 20px;
  background-color: #003d82;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.add_user_btn:hover {
  background-color: #002d62;
}

/* Table Styles */
.table-wrapper {
  overflow-x: auto;
}

.users_table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  margin-bottom: 20px;
}

.users_table thead {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.users_table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  user-select: none;
}

.users_table th .sort_icon {
  margin-left: 5px;
  opacity: 0.5;
  font-size: 12px;
  cursor: pointer;
}

.users_table th:hover .sort_icon {
  opacity: 1;
}

.users_table tbody tr {
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.2s ease;
}

.users_table tbody tr:hover {
  background-color: #f8f9fa;
}

.users_table td {
  padding: 14px 16px;
  font-size: 14px;
  color: #333;
  position: relative;
}

.users_table td ul {
  margin: 0px;
  position: absolute;
  z-index: 20;
  background: #ffffff;
  box-shadow: 0px 30px 70px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 5px 10px;
  width: 195px;
  right: 50px;
  top: 50px;
}

.users_table td ul li:not(:last-child) {
  border-bottom: 1px solid #e9eef4;
}

.users_table td ul::before {
  content: "";
  position: absolute;
  right: 15px;
  width: 10px;
  height: 10px;
  top: -10px;
  margin: auto;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff;
  z-index: 20;
}

.users_table td ul li a {
  border: 0;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px;
  align-items: center;
  border-radius: 0;
  background-color: #fff;
  color: #000;
}

.users_table td ul li a:hover {
  background-color: #fff;
}

.users_table td:first-child {
  color: #003d82;
  font-weight: 500;
}

/* Role Badges */
.role_badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.role_badge.teacher {
  background-color: #0052a3;
}

.role_badge.administrator {
  background-color: #0052a3;
}

.role_badge.sub_admin {
  background-color: #0052a3;
}

.role_badge.student {
  background-color: #0052a3;
}

/* Action Menu */
.action_menu {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  padding: 0 5px;
  transition: color 0.2s ease;
}

.action_menu:hover {
  color: #003d82;
}

form.user_form .half_box {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form_group label {
  font-size: 16px;
  font-weight: 500;
}

.form_group input,
.form_group select {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background-color: #f9f9f9;
  transition: border-color 0.3s ease;
}

.form_group select {
  outline: 0;
  cursor: pointer;
}

form.user_form .half_box .form_group {
  width: 100%;
}

.form_group p.password_hint {
  font-size: 12px;
  margin-top: 5px;
  color: #333;
}

.error-msg {
  display: block;
  font-size: 14px;
  color: #ad0000;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
  background: #003d82;
}

/* Responsive Design */
@media (max-width: 768px) {
  .search_add_wrapper {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .search_box {
    max-width: 100%;
  }

  .add_user_btn {
    justify-content: center;
  }

  .users_table {
    font-size: 12px;
  }

  .users_table th,
  .users_table td {
    padding: 10px 8px;
  }

  .pagination_wrapper {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .pagination_controls {
    width: 100%;
    justify-content: space-between;
  }

  .role_badge {
    padding: 4px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .user_management {
    padding: 15px;
  }

  .user_management .heading h1 {
    font-size: 22px;
  }

  .users_table {
    font-size: 11px;
  }

  .users_table th,
  .users_table td {
    padding: 8px 4px;
  }

  .sort_icon {
    display: none;
  }

  .tablewrapper {
    overflow-x: auto;
  }
}

/* RESPONSIVE DESIGN */

@media (max-width: 1400px) {
  .dashboard_grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 200px;
  }

  .dashboard_sidebar.collapsed {
    width: 80px;
  }

  .dashboard_content {
    padding: 20px 25px;
  }

  .header_content {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .header_right {
    width: 100%;
    gap: 15px;
  }

  .search_box {
    flex: 1;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }

  .dashboard_sidebar {
    position: fixed;
    left: -280px;
    transition: left 0.3s ease;
    width: 280px;
  }

  .dashboard_sidebar.open,
  .dashboard_sidebar.collapsed {
    left: 0;
    width: 280px;
  }

  .dashboard_sidebar.collapsed .menu_text {
    opacity: 1;
    display: inline;
  }

  .dashboard_main {
    margin-left: 0;
  }

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

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

  .stat_card {
    flex-direction: column;
    text-align: center;
  }

  .greeting_title {
    font-size: 22px;
  }

  .header_container {
    padding: 15px 20px;
  }

  .search_box {
    min-width: auto;
  }

  .profile_section {
    gap: 8px;
  }

  .profile_info {
    display: none;
  }

  .schedule_item {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --sidebar-width: 0px;
  }

  .dashboard_sidebar {
    position: fixed;
    left: -280px;
    transition: left 0.3s ease;
    width: 280px;
  }

  .dashboard_sidebar.open {
    left: 0;
  }

  .stats_container {
    gap: 15px;
  }

  .stat_card {
    padding: 15px;
  }

  .stat_value {
    font-size: 24px;
  }

  .greeting_title {
    font-size: 18px;
  }

  .dashboard_content {
    padding: 15px;
  }

  .card_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header_right {
    flex-direction: column;
    width: 100%;
  }

  .search_box {
    width: 100%;
  }
}