/* ════════════════════════════════════════════════════════════
   USafe Admin — Premium Theme
   Transforms AdminLTE v2 into a branded safety platform
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --usafe-yellow: #f5b700;
  --usafe-yellow-light: #fff8e1;
  --usafe-yellow-hover: #e5aa00;
  --usafe-charcoal: #2d2d2d;
  --usafe-charcoal-light: #3d3d3d;
  --usafe-charcoal-deep: #1a1a1a;
  --usafe-surface: #f4f5f7;
  --usafe-white: #ffffff;
  --usafe-green: #16a34a;
  --usafe-green-bg: #dcfce7;
  --usafe-red: #dc2626;
  --usafe-red-bg: #fee2e2;
  --usafe-blue: #2563eb;
  --usafe-text: #1a1a2e;
  --usafe-text-muted: #6b7280;
  --usafe-border: #e5e7eb;
  --usafe-radius: 12px;
  --usafe-radius-sm: 8px;
  --usafe-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --usafe-shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --usafe-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Global Reset ── */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--usafe-text);
}

/* ── Top Navbar ── */
.skin-usafe .main-header .navbar {
  background: var(--usafe-charcoal);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.skin-usafe .main-header .navbar .nav > li > a,
.skin-usafe .main-header .navbar .sidebar-toggle {
  color: rgba(255,255,255,0.8);
  transition: color var(--usafe-transition);
}
.skin-usafe .main-header .navbar .nav > li > a:hover,
.skin-usafe .main-header .navbar .sidebar-toggle:hover {
  color: var(--usafe-yellow);
  background: transparent;
}

/* ── Logo ── */
.skin-usafe .main-header .logo {
  background: var(--usafe-charcoal-deep);
  color: var(--usafe-yellow);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.5px;
  border-bottom: 2px solid var(--usafe-yellow);
}
.skin-usafe .main-header .logo:hover {
  background: var(--usafe-charcoal-deep);
}
.skin-usafe .main-header .logo .logo-mini {
  font-weight: 800;
}

/* ── Sidebar ── */
.skin-usafe .main-sidebar,
.skin-usafe .left-side {
  background: var(--usafe-charcoal);
  box-shadow: 2px 0 12px rgba(0,0,0,0.1);
}
.skin-usafe .sidebar-menu > li > a {
  color: rgba(255,255,255,0.65);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 18px;
  border-left: 3px solid transparent;
  transition: all var(--usafe-transition);
}
.skin-usafe .sidebar-menu > li:hover > a,
.skin-usafe .sidebar-menu > li.active > a {
  color: var(--usafe-white);
  background: rgba(245,183,0,0.08);
  border-left: 3px solid var(--usafe-yellow);
}
.skin-usafe .sidebar-menu > li.active > a {
  background: rgba(245,183,0,0.12);
  font-weight: 600;
}
.skin-usafe .sidebar-menu > li > .treeview-menu {
  background: var(--usafe-charcoal-deep);
  padding: 4px 0;
}
.skin-usafe .sidebar-menu > li > .treeview-menu > li > a {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  padding: 8px 18px 8px 36px;
  transition: all var(--usafe-transition);
}
.skin-usafe .sidebar-menu > li > .treeview-menu > li.active > a,
.skin-usafe .sidebar-menu > li > .treeview-menu > li > a:hover {
  color: var(--usafe-yellow);
  background: transparent;
}
.skin-usafe .sidebar-menu .header {
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 16px 18px 6px;
}

/* ── User Panel ── */
.skin-usafe .user-panel {
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px;
}
.skin-usafe .user-panel > .info > p {
  color: var(--usafe-yellow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  font-size: 12px;
  font-weight: 600;
}
.skin-usafe .user-panel .info a {
  font-size: 11px;
}

/* ── Content Area ── */
.skin-usafe .content-wrapper {
  background: var(--usafe-surface);
  min-height: calc(100vh - 50px);
  overflow-y: auto;
  padding-bottom: 40px;
}
.skin-usafe .content-wrapper > .content,
.skin-usafe .content-wrapper > section.content {
  padding: 24px 32px;
}

/* Fix sidebar: stay fixed, don't scroll with content */
.skin-usafe .main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 810;
}
.skin-usafe .main-sidebar::-webkit-scrollbar { width: 4px; }
.skin-usafe .main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Boxes (Cards) — the core override ── */
.skin-usafe .box {
  border: none;
  border-top: none;
  border-radius: var(--usafe-radius);
  box-shadow: var(--usafe-shadow);
  background: var(--usafe-white);
  overflow: hidden;
  transition: box-shadow var(--usafe-transition);
}
.skin-usafe .box:hover {
  box-shadow: var(--usafe-shadow-md);
}
.skin-usafe .box .box-header {
  border-bottom: 1px solid var(--usafe-border);
  padding: 14px 20px;
  background: transparent;
}
.skin-usafe .box .box-header .box-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--usafe-text);
  letter-spacing: -0.2px;
}
.skin-usafe .box .box-body {
  padding: 20px;
}
.skin-usafe .box .box-footer {
  background: var(--usafe-surface);
  border-top: 1px solid var(--usafe-border);
  padding: 10px 20px;
}
.skin-usafe .box.box-primary { border-top: 3px solid var(--usafe-yellow); }
.skin-usafe .box.box-success { border-top: 3px solid var(--usafe-green); }
.skin-usafe .box.box-danger { border-top: 3px solid var(--usafe-red); }
.skin-usafe .box.box-info { border-top: 3px solid var(--usafe-blue); }

/* ── Stat Boxes (Dashboard) ── */
.small-box {
  border-radius: var(--usafe-radius) !important;
  overflow: hidden;
  box-shadow: var(--usafe-shadow);
  transition: transform var(--usafe-transition), box-shadow var(--usafe-transition);
  border: none;
}
.small-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--usafe-shadow-md);
}
.small-box .inner {
  padding: 16px 20px;
}
.small-box .inner h3 {
  font-weight: 800;
  font-size: 32px;
  margin-bottom: 2px;
  letter-spacing: -1px;
}
.small-box .inner p {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.small-box .icon {
  font-size: 56px;
  opacity: 0.15;
}
.small-box .small-box-footer {
  font-size: 12px;
  font-weight: 600;
  padding: 8px 20px;
  background: rgba(0,0,0,0.08);
  letter-spacing: 0.2px;
}

/* ── Buttons — kill the bootstrap look ── */
.skin-usafe .btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  border-radius: var(--usafe-radius-sm);
  border: none;
  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: 0.1px;
  transition: all var(--usafe-transition);
  box-shadow: none;
}
.skin-usafe .btn:focus {
  box-shadow: 0 0 0 3px rgba(245,183,0,0.25);
}
.skin-usafe .btn-primary,
.skin-usafe .btn-primary:focus {
  background: var(--usafe-charcoal);
  color: var(--usafe-yellow);
  border: none;
}
.skin-usafe .btn-primary:hover {
  background: var(--usafe-charcoal-deep);
  color: var(--usafe-yellow);
  transform: translateY(-1px);
}
.skin-usafe .btn-success {
  background: var(--usafe-green);
  color: white;
}
.skin-usafe .btn-success:hover {
  background: #15803d;
  transform: translateY(-1px);
}
.skin-usafe .btn-danger {
  background: var(--usafe-red);
  color: white;
}
.skin-usafe .btn-danger:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}
.skin-usafe .btn-default {
  background: var(--usafe-white);
  color: var(--usafe-text);
  border: 1px solid var(--usafe-border);
}
.skin-usafe .btn-default:hover {
  background: var(--usafe-surface);
  border-color: var(--usafe-text-muted);
}
.skin-usafe .bg-olive {
  background-color: var(--usafe-charcoal) !important;
  color: var(--usafe-yellow) !important;
  border: none;
}
.skin-usafe .bg-olive:hover {
  background-color: var(--usafe-charcoal-deep) !important;
}

/* ── Form Controls ── */
.skin-usafe .form-control {
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: 1.5px solid var(--usafe-border);
  border-radius: var(--usafe-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--usafe-text);
  background: var(--usafe-white);
  transition: border-color var(--usafe-transition), box-shadow var(--usafe-transition);
  box-shadow: none;
}
.skin-usafe .form-control:focus {
  border-color: var(--usafe-yellow);
  box-shadow: 0 0 0 3px rgba(245,183,0,0.12);
  outline: none;
}
.skin-usafe .form-control::placeholder {
  color: #b0b0b0;
}
.skin-usafe select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.skin-usafe label {
  font-weight: 600;
  font-size: 13px;
  color: var(--usafe-text);
  margin-bottom: 6px;
}

/* ── Tables ── */
.skin-usafe .table > thead > tr > th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--usafe-text-muted);
  border-bottom: 2px solid var(--usafe-border);
  padding: 12px 16px;
  background: transparent;
}
.skin-usafe .table > tbody > tr > td {
  padding: 12px 16px;
  border-top: 1px solid var(--usafe-border);
  vertical-align: middle;
  font-size: 14px;
}
.skin-usafe .table > tbody > tr:hover > td {
  background: rgba(245,183,0,0.03);
}
.skin-usafe .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(0,0,0,0.01);
}

/* ── Status Badges ── */
.badge-enabled,
.badge-approved {
  background: var(--usafe-green-bg);
  color: var(--usafe-green);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge-disabled,
.badge-rejected {
  background: var(--usafe-red-bg);
  color: var(--usafe-red);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.badge-pending {
  background: var(--usafe-yellow-light);
  color: #92620a;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ── Analytics Table ── */
.usafe-analytics-table {
  border-radius: var(--usafe-radius);
  overflow: hidden;
  border: 1px solid var(--usafe-border);
}
.usafe-analytics-table thead th {
  background: var(--usafe-charcoal);
  color: var(--usafe-white);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none;
  padding: 14px 16px;
}
.usafe-analytics-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
}
.compliance-high { color: var(--usafe-green); font-weight: 800; font-size: 16px !important; }
.compliance-mid { color: #d97706; font-weight: 800; font-size: 16px !important; }
.compliance-low { color: var(--usafe-red); font-weight: 800; font-size: 16px !important; }

/* ── Chart Box ── */
.usafe-chart-box {
  border-radius: var(--usafe-radius);
  overflow: hidden;
  box-shadow: var(--usafe-shadow);
}
.usafe-chart-box .box-header {
  background: var(--usafe-charcoal);
  color: var(--usafe-white);
  padding: 14px 20px;
}
.usafe-chart-box .box-header .box-title {
  color: var(--usafe-white);
  font-weight: 700;
  font-size: 14px;
}

/* ── DevExpress Grid Overrides ── */
.dx-datagrid {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border: none !important;
}
.dx-datagrid .dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid .dx-datagrid-borders > .dx-datagrid-rowsview {
  border: none !important;
}
.dx-datagrid-headers {
  background: var(--usafe-charcoal) !important;
  border-bottom: none !important;
  border-radius: var(--usafe-radius-sm) var(--usafe-radius-sm) 0 0 !important;
}
.dx-header-row > td {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 14px 14px !important;
}
.dx-header-row > td .dx-sort-indicator,
.dx-header-row > td .dx-column-indicators .dx-sort {
  color: var(--usafe-yellow) !important;
}
.dx-data-row > td {
  font-size: 13.5px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--usafe-border) !important;
  border-right: none !important;
  border-left: none !important;
}
.dx-data-row:hover > td {
  background: rgba(245, 183, 0, 0.04) !important;
}
.dx-data-row.dx-state-hover > td {
  background: rgba(245, 183, 0, 0.06) !important;
}
.dx-datagrid-rowsview .dx-row-alt > td {
  background: rgba(0, 0, 0, 0.015) !important;
}
.dx-toolbar {
  padding: 10px 14px !important;
  background: transparent !important;
}
.dx-toolbar .dx-button {
  border-radius: var(--usafe-radius-sm) !important;
  border: 1px solid var(--usafe-border) !important;
  background: var(--usafe-white) !important;
  transition: all var(--usafe-transition) !important;
}
.dx-toolbar .dx-button:hover,
.dx-toolbar .dx-button.dx-state-hover {
  background: var(--usafe-charcoal) !important;
  color: var(--usafe-yellow) !important;
  border-color: var(--usafe-charcoal) !important;
}
.dx-toolbar .dx-button:hover .dx-icon,
.dx-toolbar .dx-button.dx-state-hover .dx-icon {
  color: var(--usafe-yellow) !important;
}
.dx-toolbar .dx-texteditor {
  border-radius: var(--usafe-radius-sm) !important;
  border: 1.5px solid var(--usafe-border) !important;
}
.dx-toolbar .dx-texteditor.dx-state-focused {
  border-color: var(--usafe-yellow) !important;
  box-shadow: 0 0 0 3px rgba(245,183,0,0.12) !important;
}
/* Hide "Drag a column header" hint text */
.dx-datagrid-group-panel .dx-group-panel-message {
  display: none !important;
}
.dx-datagrid-group-panel {
  min-height: 0 !important;
  padding: 0 !important;
}
/* DX pager styling */
.dx-pager .dx-page-sizes .dx-selection,
.dx-pager .dx-pages .dx-selection {
  background: var(--usafe-charcoal) !important;
  color: var(--usafe-yellow) !important;
  border-radius: var(--usafe-radius-sm) !important;
}
/* DX column chooser */
.dx-popup-title {
  background: var(--usafe-charcoal) !important;
  color: var(--usafe-white) !important;
}
/* DX row borders cleanup */
.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer {
  border-color: var(--usafe-border) !important;
}

/* ── Panels ── */
.skin-usafe .panel {
  border: none;
  border-radius: var(--usafe-radius);
  box-shadow: var(--usafe-shadow);
}
.skin-usafe .panel-default > .panel-heading {
  background: var(--usafe-white);
  border-bottom: 1px solid var(--usafe-border);
  border-radius: var(--usafe-radius) var(--usafe-radius) 0 0;
}

/* ── Section Cards (Checklist creation) ── */
.skin-usafe .box.box-success {
  border-top: 3px solid var(--usafe-yellow);
  border-radius: var(--usafe-radius);
}
.skin-usafe .box.box-success > .box-header {
  background: var(--usafe-yellow-light);
  border-bottom: 1px solid rgba(245,183,0,0.2);
}
.skin-usafe .box.box-success > .box-header .box-title {
  color: var(--usafe-charcoal);
}

/* ── Site Selection Page ── */
.skin-usafe .list-group-item {
  border-radius: var(--usafe-radius-sm) !important;
  margin-bottom: 8px;
  border: 1.5px solid var(--usafe-border);
  padding: 16px 20px;
  transition: all var(--usafe-transition);
  cursor: pointer;
}
.skin-usafe .list-group-item:hover {
  border-color: var(--usafe-yellow);
  box-shadow: 0 2px 12px rgba(245,183,0,0.12);
  transform: translateY(-1px);
}
.skin-usafe .list-group-item h4 {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 2px;
}
.skin-usafe .list-group-item p {
  color: var(--usafe-text-muted);
  margin: 0;
  font-size: 13px;
}

/* ── Footer ── */
.skin-usafe .main-footer {
  border-top: 2px solid var(--usafe-yellow);
  font-size: 12px;
  color: var(--usafe-text-muted);
  background: var(--usafe-white);
}

/* ── Content Header (page titles) ── */
.skin-usafe .content-header > h1 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
}

/* ── Boilerplate cleanup ── */
.skin-usafe .content-wrapper .jumbotron { display: none; }

/* ── Checklist form spacing ── */
.skin-usafe .box-body .form-group { margin-bottom: 14px; }
.skin-usafe .box-body h4 { margin-top: 8px; margin-bottom: 6px; }

/* ── Pagination ── */
.skin-usafe .pagination > li > a {
  border-radius: var(--usafe-radius-sm);
  margin: 0 2px;
  border: 1px solid var(--usafe-border);
  color: var(--usafe-text);
  font-weight: 600;
  font-size: 13px;
}
.skin-usafe .pagination > .active > a,
.skin-usafe .pagination > .active > a:hover {
  background: var(--usafe-charcoal);
  border-color: var(--usafe-charcoal);
}

/* ── Scrollbar ── */
.skin-usafe ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.skin-usafe ::-webkit-scrollbar-track {
  background: transparent;
}
.skin-usafe ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
.skin-usafe ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

/* ── SweetAlert2 Theme ── */
.swal2-popup {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-radius: var(--usafe-radius) !important;
  padding: 28px !important;
}
.swal2-title {
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--usafe-text) !important;
}
.swal2-html-container {
  font-size: 14px !important;
  color: var(--usafe-text-muted) !important;
}
.swal2-confirm {
  background: var(--usafe-charcoal) !important;
  color: var(--usafe-yellow) !important;
  border-radius: var(--usafe-radius-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  box-shadow: none !important;
}
.swal2-cancel {
  border-radius: var(--usafe-radius-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: var(--usafe-green) !important;
}
.swal2-icon.swal2-error {
  border-color: var(--usafe-red) !important;
}

/* ── Page load animation ── */
.skin-usafe .content-wrapper > .content {
  animation: usafe-admin-in 0.3s ease-out;
}
@keyframes usafe-admin-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}