/* modern-styles-bootstrap3.css */
:root {
  /* Color palette */
  --primary: #00b393;
  --secondary: #4e5e6a;
  --success: #00b393;
  --danger: #f05050;
  --warning: #f0ad4e;
  --info: #1ccacc;
  --light: #f2f4f6;
  --dark: #1d2632;
  
  /* Shadows */
  --shadow-default: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-hover: 0 3px 6px rgba(0,0,0,0.12);
}

/* Base Improvements */
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Panel Modernization (Bootstrap 3's .panel) */
.panel {
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-default);
  transition: box-shadow 0.3s ease;
  position: relative;
}

.panel:hover {
  box-shadow: var(--shadow-hover);
}

.panel-heading {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 15px 20px;
}

.panel-body {
  padding: 20px;
}

/* Button Improvements */
.btn {
  border-radius: 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  font-weight: 500;
  padding: 8px 16px;
  position: relative;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,179,147,0.3);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover {
  background: #009879;
  border-color: #009879;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Table Improvements */
.table > tbody > tr {
  transition: background-color 0.2s ease;
}

.table > tbody > tr > td {
  padding: 12px 8px;
  border-top: 1px solid #f2f4f6;
}

.table-hover > tbody > tr:hover {
  background-color: rgba(242,244,246,0.5);
}

/* Navbar Enhancement */
.navbar-default {
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.navbar-nav > li > a {
  transition: color 0.2s ease;
}

/* Sidebar Improvements */
#sidebar {
  transition: width 0.3s ease;
}

#sidebar-menu li a {
  padding: 12px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#sidebar-menu li a:hover {
  background: rgba(255,255,255,0.1);
}

/* Thumbnail Enhancement */
.thumbnail {
  border: 1px solid #f2f4f6;
  border-radius: 8px;
  padding: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.thumbnail:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-hover);
}

/* List Items */
.list-group-item {
  transition: background-color 0.2s ease;
  border: 1px solid #f2f4f6;
}

.list-group-item:hover {
  background-color: rgba(242,244,246,0.5);
}

/* Dropdown Enhancement */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 4px;
}

.dropdown-menu > li > a {
  padding: 8px 20px;
  transition: background-color 0.2s ease;
}

.dropdown-menu > li > a:hover {
  background-color: #f8f9fa;
}

/* Form Controls */
.form-control {
  border: 2px solid #f2f4f6;
  border-radius: 4px;
  padding: 8px 12px;
  height: auto;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,179,147,0.1);
}

/* Modal Improvements */
.modal-content {
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

/* Links Enhancement */
a {
  transition: color 0.2s ease;
}

/* Pagination Enhancement */
.pagination > li > a,
.pagination > li > span {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Custom Hover Effects for Text Elements */
.hover-highlight {
  transition: background-color 0.2s ease;
  position: relative;
}

.hover-highlight:hover {
  background-color: rgba(0,179,147,0.05);
}

/* Alert Improvements */
.alert {
  border: none;
  border-radius: 6px;
  box-shadow: var(--shadow-default);
}

/* Progress Bars */
.progress {
  box-shadow: none;
  border-radius: 4px;
  background-color: #f2f4f6;
  overflow: hidden;
}

.progress-bar {
  transition: width 0.5s ease;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f2f4f6;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.page-title.clearfix{
  margin-bottom: 1.5rem;
  padding: 15px 20px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Responsive Optimizations */
@media (max-width: 768px) {
  .panel, .modal-content {
    border-radius: 6px;
  }
  
  .panel-heading, .panel-body {
    padding: 15px;
  }
}

/* scrollbar custom plugin */
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 4px;
  height: auto;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  text-align: center;
}