/* PulseHR Pro Modern Styles - Replace your old CSS with this */

:root {
  --pulse-primary: #0a2b3c;
  --pulse-secondary: #1a4c6e;
  --pulse-accent: #1f6e8c;
  --pulse-teal: #2e8b9e;
  --pulse-light: #f5f7fc;
}

/* Reset rounded corners (opposite of Metronic) */
* {
  border-radius: 0;
}

/* PulseHR uses rounded corners - override selectively */
.card,
.pulsehr-card,
.modal-content,
.btn,
.form-control,
.dropdown-menu,
.portlet,
.panel,
.alert,
.badge,
.pagination>li>a {
  border-radius: 16px !important;
}

/* Buttons with gradients */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  background: linear-gradient(105deg, #1f6e8c 0%, #2e8b9e 100%) !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(31, 110, 140, 0.3);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background: linear-gradient(105deg, #0a2b3c 0%, #1a4c6e 100%) !important;
  transform: translateY(-1px);
}

/* Cards */
.portlet,
.panel,
.well {
  border-radius: 24px !important;
  border: 1px solid #eef2f8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.portlet-title {
  background: white !important;
  border-bottom: 1px solid #eef2f8 !important;
  padding: 18px 24px !important;
}

.portlet-title .caption {
  color: #0a2b3c !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Status badges */
.badge,
.label {
  border-radius: 30px !important;
  padding: 5px 12px !important;
  font-weight: 600 !important;
}

.label-success,
.badge-success {
  background: #e6f7ec !important;
  color: #2b7e4a !important;
}

.label-warning,
.badge-warning {
  background: #fff4e5 !important;
  color: #c47a2e !important;
}

.label-danger,
.badge-danger {
  background: #fee9e6 !important;
  color: #d9534f !important;
}

.label-info,
.badge-info {
  background: #e6f4f5 !important;
  color: #1f6e8c !important;
}

/* Tables */
.table {
  border-radius: 20px !important;
  overflow: hidden;
}

.table>thead>tr>th {
  background: #f8fafc !important;
  font-weight: 700 !important;
  color: #1e2f44 !important;
  border-bottom: 1px solid #eef2f8 !important;
}

.table>tbody>tr:hover {
  background: #fafcfd !important;
}

/* Form inputs */
.form-control {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 10px 16px !important;
}

.form-control:focus {
  border-color: #1f6e8c !important;
  box-shadow: 0 0 0 3px rgba(31, 110, 140, 0.1) !important;
}

/* Progress bars */
.progress {
  border-radius: 10px !important;
  background: #e8eef3 !important;
}

.progress-bar {
  background: linear-gradient(90deg, #1f6e8c, #2e8b9e) !important;
  border-radius: 10px !important;
}

/* Nav tabs */
.nav-tabs>li>a {
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600 !important;
  color: #6c7a91 !important;
}

.nav-tabs>li.active>a {
  color: #1f6e8c !important;
  border-bottom: 2px solid #1f6e8c !important;
}

/* Modals */
.modal-content {
  border-radius: 28px !important;
  border: none !important;
}

.modal-header {
  border-bottom: 1px solid #eef2f8 !important;
  padding: 20px 24px !important;
}

/* Dropdowns */
.dropdown-menu {
  border-radius: 16px !important;
  border: 1px solid #eef2f8 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

.dropdown-menu>li>a {
  padding: 8px 20px !important;
}

.dropdown-menu>li>a:hover {
  background: #f0f9fa !important;
  color: #1f6e8c !important;
}

/* Pagination */
.pagination>li>a,
.pagination>li>span {
  border-radius: 12px !important;
  margin: 0 3px !important;
  color: #1f6e8c !important;
}

.pagination>.active>a {
  background: linear-gradient(105deg, #1f6e8c, #2e8b9e) !important;
  border-color: #1f6e8c !important;
  color: #fff !important;

}

/* Alerts */
.alert {
  border-radius: 20px !important;
  border: none !important;
}

/* Dashboard stats (your existing .dashboard-stat class) */
.dashboard-stat {
  border-radius: 24px !important;
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid #eef2f8 !important;
}

.dashboard-stat .details .number {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0a2b3c !important;
}

/* Your custom classes */
.pulsehr-hero h1 {
  background: linear-gradient(135deg, #0a2b3c 0%, #1a4c6e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}