:root {
  --ts-navy: #0f2f57;
  --ts-blue: #1267b3;
  --ts-cyan: #21a5b8;
  --ts-gold: #f3b41b;
  --ts-ink: #172033;
  --ts-muted: #64748b;
  --ts-line: rgba(15, 47, 87, 0.1);
  --ts-soft: #f4f8fc;
  --ts-surface: rgba(255, 255, 255, 0.96);
  --ts-shadow: 0 18px 45px rgba(15, 47, 87, 0.12);
  --ts-shadow-sm: 0 10px 24px rgba(15, 47, 87, 0.09);
  --ts-radius: 16px;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ts-ink);
  text-rendering: optimizeLegibility;
}

a,
button,
.btn,
.nav-link,
.form-control,
.custom-select,
.card,
.small-box,
.info-box {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}


body:not(.hold-transition) .container {
  border-radius: 20px;
}

body:not(.hold-transition) .header {
  background: linear-gradient(135deg, var(--ts-navy), var(--ts-blue) 62%, var(--ts-cyan)) !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: var(--ts-shadow-sm);
}

body:not(.hold-transition) .content,
.welcome-card,
.login-card {
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  box-shadow: var(--ts-shadow) !important;
}

.welcome-card,
.login-card {
  border-radius: 20px !important;
}

.logo-wrapper {
  box-shadow: 0 14px 28px rgba(15, 47, 87, 0.14) !important;
}

.badge-pill {
  border: 1px solid rgba(18, 103, 179, 0.16);
  box-shadow: 0 10px 24px rgba(18, 103, 179, 0.12);
}

.btn-custom,
.btn-submit,
.btn {
  border-radius: 12px !important;
  font-weight: 700;
}

.btn:hover,
.btn-custom:hover,
.btn-submit:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-info,
.btn-primary-gradient,
.btn-submit {
  background: linear-gradient(135deg, var(--ts-blue), #0d4f8d) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(18, 103, 179, 0.22);
}

.btn-success {
  background: linear-gradient(135deg, #0f9f7a, #087f5b) !important;
  border-color: transparent !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--ts-gold), #dd8f05) !important;
  border-color: transparent !important;
  color: #1f2937 !important;
}

.btn-danger,
.btn-logout {
  background: linear-gradient(135deg, #ef4444, #be123c) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"] {
  border: 1px solid #d8e2ee !important;
  border-radius: 12px !important;
  color: var(--ts-ink);
  box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus {
  border-color: rgba(18, 103, 179, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(18, 103, 179, 0.14) !important;
  outline: none !important;
}

body.hold-transition {
  background: #edf3f8 !important;
}

.hold-transition .content-wrapper {
  background:
    radial-gradient(circle at top left, rgba(18, 103, 179, 0.14), transparent 28rem),
    linear-gradient(180deg, #eef6fd 0%, #f8fafc 45%, #f5f8fb 100%) !important;
}

.hold-transition .main-header.navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid var(--ts-line) !important;
  box-shadow: 0 10px 30px rgba(15, 47, 87, 0.08) !important;
  backdrop-filter: blur(14px);
}

.hold-transition .main-header .nav-link {
  color: #23344d !important;
  border-radius: 10px !important;
}

.hold-transition .main-header .nav-link:hover,
.hold-transition .main-header .nav-link.active {
  background: rgba(18, 103, 179, 0.1) !important;
  color: var(--ts-blue) !important;
}

.hold-transition .main-sidebar {
  background: linear-gradient(180deg, #081d36 0%, var(--ts-navy) 58%, #0b3b54 100%) !important;
  box-shadow: 12px 0 30px rgba(15, 47, 87, 0.18) !important;
}

.hold-transition .sidebar {
  background: transparent !important;
}

.hold-transition .brand-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hold-transition .brand-text {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.hold-transition .user-panel {
  margin: 1rem 0.75rem;
  padding: 0.9rem 0.75rem !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.hold-transition .nav-sidebar .nav-header {
  color: var(--ts-gold) !important;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hold-transition .nav-sidebar .nav-link {
  margin: 0.18rem 0.65rem;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.hold-transition .nav-sidebar .nav-link p,
.hold-transition .nav-sidebar .nav-link i {
  color: inherit !important;
}

.hold-transition .nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.hold-transition .nav-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--ts-blue), var(--ts-cyan)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(18, 103, 179, 0.28);
}

.hold-transition .content-header {
  padding: 22px 24px 10px;
}

.hold-transition .content-header .container-fluid,
.hold-transition .content-header .my-1622767292 {
  max-width: none;
}

.hold-transition .content-header .my-1622767292 {
  background: linear-gradient(135deg, var(--ts-navy), var(--ts-blue) 65%, #128a96) !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  box-shadow: var(--ts-shadow-sm) !important;
}

.hold-transition .content-header h1,
.hold-transition .content-header .my-1622766817 {
  color: inherit !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.hold-transition .breadcrumb {
  background: transparent;
  margin-bottom: 0;
}

.hold-transition .breadcrumb a {
  color: var(--ts-blue);
  font-weight: 700;
}

.hold-transition .content {
  padding: 0 24px 28px;
}

.hold-transition .card,
.hold-transition .info-box,
.hold-transition .small-box {
  border: 1px solid var(--ts-line) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow-sm) !important;
  overflow: hidden;
}

.hold-transition .card:hover,
.hold-transition .info-box:hover,
.hold-transition .small-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--ts-shadow) !important;
}

.hold-transition .card-header {
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  border-bottom: 1px solid var(--ts-line) !important;
}

.hold-transition .card-title {
  color: var(--ts-ink);
  font-weight: 800;
}

.hold-transition .small-box .icon {
  opacity: 0.2;
}

.hold-transition .small-box.bg-info,
.hold-transition .bg-info {
  background: linear-gradient(135deg, #1267b3, #21a5b8) !important;
}

.hold-transition .small-box.bg-success,
.hold-transition .bg-success {
  background: linear-gradient(135deg, #0f9f7a, #12b981) !important;
}

.hold-transition .small-box.bg-warning,
.hold-transition .bg-warning {
  background: linear-gradient(135deg, #f3b41b, #f59e0b) !important;
}

.hold-transition .small-box.bg-danger,
.hold-transition .bg-danger {
  background: linear-gradient(135deg, #ef4444, #be123c) !important;
}

.hold-transition .table-responsive {
  border-radius: var(--ts-radius);
}

.hold-transition .table {
  margin-bottom: 0;
}

.hold-transition .table thead th {
  background: #eef5fb;
  border-bottom: 1px solid var(--ts-line);
  color: #203049;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hold-transition .table tbody tr:hover {
  background: rgba(18, 103, 179, 0.045);
}

.hold-transition .main-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--ts-line) !important;
  color: var(--ts-muted);
}

.font-sans.antialiased .min-h-screen.bg-gray-100 {
  background:
    radial-gradient(circle at top left, rgba(18, 103, 179, 0.14), transparent 24rem),
    linear-gradient(180deg, #eef6fd 0%, #f8fafc 100%) !important;
}

.font-sans.antialiased header.bg-white.shadow,
.font-sans.antialiased .bg-white.shadow,
.font-sans.antialiased .bg-white.overflow-hidden,
.font-sans.antialiased .bg-white.rounded-lg {
  border: 1px solid var(--ts-line) !important;
  border-radius: var(--ts-radius) !important;
  box-shadow: var(--ts-shadow-sm) !important;
}

.font-sans.antialiased header.bg-white.shadow {
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
}

@media (max-width: 767.98px) {
  .hold-transition .content-header,
  .hold-transition .content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hold-transition .content-header h1 {
    font-size: 1.55rem;
  }

  .hold-transition .card,
  .hold-transition .info-box,
  .hold-transition .small-box {
    border-radius: 14px !important;
  }


  .welcome-card,
  .login-card {
    border-radius: 18px !important;
  }
}



/* Enhanced AdminLTE navigation */
.hold-transition .wrapper {
  background: #edf3f8;
}

.hold-transition .main-header.navbar {
  min-height: 64px !important;
  padding: 0.65rem 1rem !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(15, 47, 87, 0.08) !important;
  box-shadow: 0 12px 34px rgba(15, 47, 87, 0.1) !important;
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 1034;
}

.hold-transition .main-header.navbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ts-gold), var(--ts-cyan), var(--ts-blue));
}

.hold-transition .main-header .navbar-nav {
  align-items: center;
  gap: 0.2rem;
}

.hold-transition .main-header .nav-item {
  display: flex;
  align-items: center;
}

.hold-transition .main-header .nav-link,
.hold-transition .main-header .nav-link-smooth {
  min-height: 40px;
  padding: 0.56rem 0.78rem !important;
  color: #23344d !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.44rem;
}

.hold-transition .main-header .nav-link i,
.hold-transition .main-header .nav-link-smooth i {
  width: 1.15rem;
  margin-right: 0 !important;
  color: var(--ts-blue) !important;
  text-align: center;
}

.hold-transition .main-header .nav-link:hover,
.hold-transition .main-header .nav-link:focus,
.hold-transition .main-header .nav-link.active,
.hold-transition .main-header .nav-link-smooth:hover,
.hold-transition .main-header .nav-link-smooth:focus {
  background: linear-gradient(135deg, rgba(18, 103, 179, 0.12), rgba(33, 165, 184, 0.1)) !important;
  border-color: rgba(18, 103, 179, 0.12) !important;
  color: var(--ts-blue) !important;
  box-shadow: 0 10px 22px rgba(18, 103, 179, 0.1) !important;
  transform: translateY(-1px);
}

.hold-transition .main-header [data-widget="pushmenu"] {
  width: 42px;
  justify-content: center;
  background: #f0f6fb !important;
  border-color: rgba(18, 103, 179, 0.12) !important;
}

.hold-transition .main-header [data-widget="fullscreen"] {
  width: 42px;
  justify-content: center;
}

.hold-transition .main-header form {
  margin-bottom: 0 !important;
}

.hold-transition .main-header .btn,
.hold-transition .main-header .btn-logout {
  min-height: 40px;
  padding: 0.56rem 0.95rem !important;
  border-radius: 12px !important;
  border: 0 !important;
  box-shadow: 0 12px 22px rgba(190, 18, 60, 0.18) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
}

.hold-transition .main-header .btn:hover,
.hold-transition .main-header .btn-logout:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(190, 18, 60, 0.24) !important;
}

.hold-transition .main-sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 34%),
    linear-gradient(180deg, #071a31 0%, #0f2f57 54%, #0b4157 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.hold-transition .main-sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(243, 180, 27, 0.45), transparent);
  pointer-events: none;
}

.hold-transition .brand-link {
  min-height: 64px;
  padding: 0.8rem 1rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center;
  gap: 0.62rem;
}

.hold-transition .brand-link .brand-image {
  width: 38px !important;
  height: 38px !important;
  max-height: 38px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 4px;
  background: #ffffff;
  border: 2px solid rgba(243, 180, 27, 0.75);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

.hold-transition .brand-link .brand-text {
  color: #ffffff !important;
  font-size: 0.98rem;
  font-weight: 800 !important;
  line-height: 1.2;
  white-space: normal;
}

.hold-transition .sidebar {
  padding: 0.35rem 0 1rem;
}

.hold-transition .user-panel {
  margin: 1rem 0.85rem 0.75rem !important;
  padding: 0.9rem !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.14);
}

.hold-transition .user-panel .image img {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

.hold-transition .user-panel .info {
  padding-left: 0.7rem;
}

.hold-transition .user-panel .info a {
  color: #ffffff !important;
  font-weight: 800 !important;
  line-height: 1.25;
}

.hold-transition .nav-sidebar {
  padding: 0 0.35rem;
}

.hold-transition .nav-sidebar .nav-header {
  padding: 0.9rem 1rem 0.45rem !important;
  color: #ffd36c !important;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.hold-transition .nav-sidebar .nav-item {
  margin: 0.12rem 0;
}

.hold-transition .nav-sidebar .nav-link {
  min-height: 43px;
  margin: 0.16rem 0.45rem !important;
  padding: 0.62rem 0.78rem !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  position: relative;
  overflow: hidden;
}

.hold-transition .nav-sidebar .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

.hold-transition .nav-sidebar .nav-icon {
  width: 1.55rem !important;
  margin-right: 0.52rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-align: center;
}

.hold-transition .nav-sidebar .nav-link p {
  font-weight: 700;
  color: inherit !important;
  letter-spacing: 0 !important;
}

.hold-transition .nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transform: translateX(2px);
}

.hold-transition .nav-sidebar .nav-link:hover::before {
  background: rgba(243, 180, 27, 0.72);
}

.hold-transition .nav-sidebar .nav-link:hover .nav-icon {
  color: #ffd36c !important;
}

.hold-transition .nav-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--ts-blue), var(--ts-cyan)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 24px rgba(18, 103, 179, 0.32) !important;
}

.hold-transition .nav-sidebar .nav-link.active::before {
  background: var(--ts-gold);
}

.hold-transition .nav-sidebar .nav-link.active .nav-icon {
  color: #ffffff !important;
}

.hold-transition .nav-treeview {
  margin: 0.18rem 0.45rem 0.55rem;
  padding: 0.35rem 0;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.hold-transition .nav-treeview .nav-link {
  margin-left: 0.35rem !important;
  margin-right: 0.35rem !important;
}

.sidebar-mini.sidebar-collapse .hold-transition .brand-link,
body.sidebar-collapse .brand-link {
  justify-content: center;
}

body.sidebar-collapse .brand-link .brand-image {
  margin-left: 0 !important;
}

body.sidebar-collapse .user-panel {
  margin-left: 0.55rem !important;
  margin-right: 0.55rem !important;
  padding: 0.65rem !important;
}

@media (max-width: 991.98px) {
  .hold-transition .main-header.navbar {
    min-height: 58px !important;
    padding: 0.5rem 0.75rem !important;
  }

  .hold-transition .main-header .nav-link,
  .hold-transition .main-header .nav-link-smooth {
    min-height: 38px;
    padding: 0.5rem 0.62rem !important;
  }

  .hold-transition .main-header .btn,
  .hold-transition .main-header .btn-logout {
    min-height: 38px;
    padding: 0.5rem 0.72rem !important;
  }
}