@import url("https://fonts.googleapis.com/css2?family=Kanit&display=swap");

body {
  font-family: "Kanit", sans-serif;
  background: var(--main-pink-light);
}

:root {
  --main-pink: #dc5b8a;
  --main-pink-dark: #b94c71;
  --main-pink-light: #f7e3ec;
}

#footer {
  background-color: var(--main-pink);
  color: #f6f6f6;
}
.portlet-decoration {
  padding: 5px 8px;
  background: var(--main-pink);
  border-left: 5px solid #f6f6f6;
}
a:focus,
a:hover {
  color: #333333 !important;
}
a {
  color: #333333;
}
.grid-view table.items th {
  background: var(--main-pink);
  color: #f6f6f6;
}
.grid-view table.items th a {
  color: #f6f6f6;
}
.grid-view td.extrarow {
  background: none repeat scroll 0 0 #f8bbd0;
  height: 20px;
}
.bg-primary {
  background-color: var(--main-pink) !important;
}
.border-primary {
  border-color: var(--main-pink) !important;
}
.btn-primary {
  background-color: var(--main-pink) !important;
  border-color: var(--main-pink) !important;
}

/* Button */
.btn-primary.gradient {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: var(--main-pink);
  background-image: linear-gradient(to bottom, #f6f6f6, var(--main-pink));
  background-repeat: repeat-x;
  border-color: var(--main-pink);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#F23B92', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-primary.gradient:hover,
.btn-primary.gradient:focus,
.btn-primary.gradient:active,
.btn-primary.gradient.active,
.btn-primary.gradient.disabled,
.btn-primary.gradient[disabled] {
  color: #ffffff;
  background-color: #f88ec4;
}
.btn-danger.gradient {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #c62828;
  background-image: linear-gradient(to bottom, #ef9a9a, #c62828);
  background-repeat: repeat-x;
  border-color: #c62828;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EF9A9A', endColorstr='#C62828', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-danger.gradient:hover,
.btn-danger.gradient:focus,
.btn-danger.gradient:active,
.btn-danger.gradient.active,
.btn-danger.gradient.disabled,
.btn-danger.gradient[disabled] {
  color: #ffffff;
  background-color: #f88ec4;
}

/* Nav */
.navbar-green {
  background-color: var(--main-pink) !important;
}
.navbar-green .navbar-nav .nav-link {
  color: #fff !important;
}
.navbar-green .navbar-nav .nav-link.active,
.navbar-green .navbar-nav .nav-link:focus,
.navbar-green .navbar-nav .nav-link:hover {
  color: #fff !important;
  background-color: var(--main-pink-dark) !important;
}
.navbar-nav {
  gap: 0.5rem;
}
.nav-link {
  border-radius: 0.25rem;
}

/* Bootstrap 5 nav pink */
.navbar .nav-link,
.navbar .navbar-brand {
  color: #fff !important;
}
.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
  color: #fff !important;
  background: var(--main-pink-dark) !important;
}
.breadcrumb {
  background: var(--main-pink-light) !important;
}
.card,
.card-header,
.card-footer {
  border-color: var(--main-pink);
}
.card-header,
.card-footer {
  background: var(--main-pink-light);
  color: var(--main-pink-dark);
}
.form-check-input:checked {
  background-color: var(--main-pink);
  border-color: var(--main-pink-dark);
}
.page-link,
.pagination .active .page-link {
  background: var(--main-pink);
  border-color: var(--main-pink-dark);
  color: #fff;
}
.page-link:hover {
  background: var(--main-pink-dark);
  color: #fff;
}
.fa-user,
.fas.fa-user {
  color: var(--main-pink-dark);
}

.profile-hr {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, #dc5b8a 0%, #f88ec4 100%);
  margin: 2rem 0 2rem 0;
  opacity: 1;
}
.profile-menu-btn {
  background: linear-gradient(90deg, #dc5b8a 0%, #f88ec4 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  box-shadow: 0 2px 8px 0 rgba(220, 91, 138, 0.1);
  transition: background 0.2s, color 0.2s;
}
.profile-menu-btn.active,
.profile-menu-btn:active {
  background: linear-gradient(90deg, #f8bbd0 0%, #f88ec4 100%) !important;
  color: #b94c71 !important;
  text-shadow: none;
  box-shadow: 0 4px 16px 0 rgba(248, 174, 196, 0.18);
  outline: 2px solid #f88ec4;
}
.profile-menu-btn:hover,
.profile-menu-btn:focus {
  background: linear-gradient(90deg, #b94c71 0%, #dc5b8a 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #dc5b8a 0%, #f88ec4 100%);
  color: #fff;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  font-weight: 500;
  font-size: 1.1rem;
  min-height: 48px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.add-exp {
  border: 2px dashed #bbb;
  background: #fafbfc;
  transition: border-color 0.2s, background 0.2s;
}

.add-exp:hover {
  border-color: #888;
  background: #f0f0f0;
}

.btn-close {
  font-size: 0.8rem;
}