@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --gk-radius-xs: 10px;
  --gk-radius-sm: 14px;
  --gk-radius-md: 18px;
  --gk-radius-lg: 22px;
  --gk-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
  --gk-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.16);
  --gk-transition: 180ms ease;
  --gk-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gk-bg: #f4f7fb;
  --gk-bg-elevated: #ffffff;
  --gk-bg-sidebar: #eff4fb;
  --gk-surface: #ffffff;
  --gk-surface-2: #f7faff;
  --gk-surface-3: #edf3fb;
  --gk-border: rgba(82, 103, 131, 0.14);
  --gk-border-strong: rgba(82, 103, 131, 0.24);
  --gk-text: #18212f;
  --gk-text-soft: #5d6b80;
  --gk-text-dim: #718198;
  --gk-accent: #5b6cff;
  --gk-accent-2: #7a6dff;
  --gk-success: #268a60;
  --gk-warning: #bf8c2e;
  --gk-danger: #c94b5d;
  --gk-overlay: rgba(15, 23, 42, 0.68);
  color-scheme: light;
}

html, body { min-height: 100%; }
body {
  font-family: var(--gk-font) !important;
  background: var(--gk-bg) !important;
  color: var(--gk-text) !important;
  padding-top: 76px !important;
}
body,
#wrapper,
#page-content-wrapper,
.container,
.container-fluid,
main,
section {
  background: var(--gk-bg) !important;
  color: var(--gk-text) !important;
}

a { color: var(--gk-accent); }
a:hover { color: var(--gk-accent-2); }
.text-muted, small, .small, .user-subhead, .file-size, .text-secondary { color: var(--gk-text-soft) !important; }
.text-dark, .text-body, .card-title, .card-text, label, .form-label, p, h1, h2, h3, h4, h5, h6, span, div { color: inherit; }

.navbar.app-navbar {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--gk-border) !important;
  backdrop-filter: blur(16px);
}
.navbar.app-navbar .navbar-brand,
.navbar.app-navbar .nav-link,
.navbar.app-navbar .dropdown-item,
.navbar.app-navbar .navbar-toggler { color: var(--gk-text) !important; }
.navbar.app-navbar .dropdown-menu {
  background: var(--gk-surface) !important;
  border: 1px solid var(--gk-border) !important;
  border-radius: var(--gk-radius-sm) !important;
  box-shadow: var(--gk-shadow) !important;
}
.navbar.app-navbar .dropdown-divider { border-color: var(--gk-border) !important; }
.navbar.app-navbar .dropdown-item:hover,
.navbar.app-navbar .dropdown-item:focus { background: rgba(91,108,255,.08) !important; }

.modern-btn,
.btn,
.action-btn,
.cyber-btn,
.modern-action-btn,
.status-badge,
.role-badge,
.status-option,
.role-option,
.page-link,
.dropdown-toggle,
.toggle-slider {
  transition: all var(--gk-transition) !important;
}

.modern-btn,
.btn,
.action-btn,
.cyber-btn,
.modern-action-btn {
  border-radius: 12px !important;
  border: 1px solid var(--gk-border) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn:hover,
.modern-btn:hover,
.action-btn:hover,
.cyber-btn:hover,
.modern-action-btn:hover { transform: translateY(-1px); }

.btn-primary,
.modern-btn-primary,
.modern-primary-btn,
.cyber-btn,
.action-btn.btn-primary,
.modern-action-btn:not(.modern-danger-btn) {
  background: linear-gradient(135deg, var(--gk-accent), var(--gk-accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-secondary,
.modern-btn-outline,
.action-btn.btn-secondary {
  background: var(--gk-surface-2) !important;
  color: var(--gk-text) !important;
}
.btn-success,
.modern-btn-success,
.action-btn.btn-success {
  background: linear-gradient(135deg, #2c9f68, #268a60) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-warning,
.action-btn.btn-warning {
  background: linear-gradient(135deg, #d6a03b, #b98227) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-danger,
.modern-btn-danger,
.modern-danger-btn,
.action-btn.btn-danger {
  background: linear-gradient(135deg, #dd6273, #c94b5d) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-light,
.btn-outline-light,
.btn-outline-secondary {
  background: #fff !important;
  color: var(--gk-text) !important;
  border-color: var(--gk-border) !important;
}
.btn:disabled,
.disabled,
.disabled-action-btn {
  opacity: .62 !important;
  cursor: not-allowed !important;
  filter: saturate(.65);
}
.disabled-action-btn {
  background: var(--gk-surface-2) !important;
  color: var(--gk-text-soft) !important;
}

.card,
.main-box,
.report-table,
.users-table,
.table-responsive,
.modal-content,
.toast,
.role-selector,
.status-selector,
.cyber-card,
.stat-card,
.bg-white,
.list-group-item,
.offcanvas,
.login-container,
.register-container,
.login-card,
.register-card,
.alert,
.dropdown-menu {
  background: var(--gk-surface) !important;
  color: var(--gk-text) !important;
  border: 1px solid var(--gk-border) !important;
  border-radius: var(--gk-radius-md) !important;
  box-shadow: var(--gk-shadow) !important;
}

.table,
.report-table,
.users-table {
  color: var(--gk-text) !important;
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--gk-text) !important;
  --bs-table-border-color: var(--gk-border) !important;
}
.table > :not(caption) > * > *,
.report-table td,
.report-table th,
.users-table td,
.users-table th {
  background: transparent !important;
  color: var(--gk-text) !important;
  border-color: var(--gk-border) !important;
}
.table thead th,
.report-table thead th,
.users-table thead th,
.report-table th,
.users-table th {
  background: var(--gk-surface-2) !important;
  color: var(--gk-text-soft) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}
.table tbody tr:hover,
.report-table tbody tr:hover,
.users-table tbody tr:hover { background: rgba(91,108,255,.05) !important; }

#sidebar-wrapper {
  background: var(--gk-bg-sidebar) !important;
  border-right: 1px solid var(--gk-border) !important;
  box-shadow: none !important;
}
#sidebar-wrapper .sidebar-heading {
  color: var(--gk-text) !important;
  border-bottom: 1px solid var(--gk-border) !important;
}
#sidebar-wrapper .list-group,
#sidebar-wrapper .list-group-item {
  background: transparent !important;
  color: var(--gk-text-soft) !important;
}
#sidebar-wrapper .list-group-item.active,
#sidebar-wrapper .list-group-item:hover,
#sidebar-wrapper .list-group-item:focus {
  background: rgba(91,108,255,.08) !important;
  color: var(--gk-text) !important;
  border-left: 3px solid var(--gk-accent) !important;
}

input, textarea, select,
.form-control, .form-select {
  background: var(--gk-surface-2) !important;
  color: var(--gk-text) !important;
  border: 1px solid var(--gk-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--gk-text-dim) !important; }
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
  background: #fff !important;
  color: var(--gk-text) !important;
  border-color: rgba(91,108,255,.56) !important;
  box-shadow: 0 0 0 4px rgba(91,108,255,.14) !important;
}

.modal,
.media-modal,
.media-viewer-modal {
  background: rgba(15, 23, 42, 0.68) !important;
}
.modal-content {
  overflow: hidden !important;
  max-width: min(96vw, 1100px) !important;
  margin: 0 auto !important;
}
.modal-header, .modal-footer { border-color: var(--gk-border) !important; }
.modal-body { background: var(--gk-surface) !important; color: var(--gk-text) !important; }
img, video { max-width: 100%; }
.modal-body img,
.modal-body video,
.media-preview img,
.media-preview video,
.media-container img,
.media-container video,
.viewer-media,
.media-slide img,
.media-slide video,
.media-item img,
.media-item video {
  max-height: min(72vh, 780px) !important;
  width: auto !important;
  object-fit: contain !important;
  border-radius: 14px !important;
}
.media-nav,
.media-arrow,
.modal-arrow,
.slider-arrow,
.media-prev,
.media-next,
.nav-button {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(24,33,47,.76) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

.status-badge,
.role-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  padding: .38rem .72rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.status-pending { background: rgba(224, 169, 59, .14) !important; color: #a87010 !important; }
.status-fixed { background: rgba(47, 177, 113, .14) !important; color: #217a4f !important; }
.status-in-progress { background: rgba(109, 124, 255, .14) !important; color: #5161e5 !important; }
.status-approval { background: rgba(133, 120, 255, .14) !important; color: #6a58f0 !important; }
.status-deferred { background: rgba(130, 145, 166, .14) !important; color: #5d6b80 !important; }
.status-active { background: rgba(47, 177, 113, .14) !important; color: #217a4f !important; }
.status-inactive { background: rgba(224, 93, 111, .14) !important; color: #c94b5d !important; }
.role-admin { background: rgba(109, 124, 255, .14) !important; color: #5161e5 !important; }
.role-user { background: rgba(82, 103, 131, .12) !important; color: #5d6b80 !important; }
.role-active { background: rgba(47, 177, 113, .14) !important; color: #217a4f !important; }

.login-header,
.register-header,
.card-header,
.stat-card .card-header,
.dashboard-header {
  background: linear-gradient(135deg, #5b6cff, #7a6dff) !important;
  color: #fff !important;
  border-bottom: none !important;
}

hr, .vr { border-color: var(--gk-border) !important; background-color: var(--gk-border) !important; }
.tooltip-box, .edit-tooltip, .custom-tooltip, .disabled-tooltip {
  background: #1d2736 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--gk-shadow) !important;
  border-radius: 12px !important;
}

.alert-success { color: #166534 !important; background: #ecfdf3 !important; border-color: #b7ebca !important; }
.alert-danger { color: #b42318 !important; background: #fef3f2 !important; border-color: #f5c2c7 !important; }
.alert-warning { color: #8a5a06 !important; background: #fffaeb !important; border-color: #f5e3a6 !important; }
.alert-info { color: #0c4a6e !important; background: #eef8ff !important; border-color: #c5e4ff !important; }

@media (max-width: 991.98px) {
  body { padding-top: 72px !important; }
  #sidebar-wrapper { min-height: auto !important; }
  .table-responsive,
  .card,
  .modal-content { border-radius: 16px !important; }
}