/**
 * Younger Looks Clinic - Luxury Theme Additions
 */

/* =========================================================================
   Primary Color Override (Better Gold)
   ========================================================================= */
.bg-gradient-primary {
  background-image: linear-gradient(310deg, #d4af37 0%, #f3e5ab 100%) !important;
}

.text-primary {
  color: #d4af37 !important;
}

.btn.bg-gradient-primary {
  color: #fff;
}
.btn.bg-gradient-primary:hover {
  background-color: #d4af37;
  border-color: #d4af37;
  color: #fff;
}

/* Sidenav Active Link Highlighting for Primary */
.sidenav[data-color=primary] .navbar-nav > .nav-item > .nav-link.active {
  background-color: transparent !important;
}
.sidenav[data-color=primary] .navbar-nav > .nav-item > .nav-link.active .icon {
  background-image: linear-gradient(310deg, #d4af37 0%, #f3e5ab 100%) !important;
}
.sidenav[data-color=primary] .navbar-nav > .nav-item > .nav-link.active .icon i,
.sidenav[data-color=primary] .navbar-nav > .nav-item > .nav-link.active .icon svg {
  color: #fff !important;
}
.sidenav[data-color=primary] .navbar-nav > .nav-item > .nav-link.active .nav-link-text {
  color: #344767 !important;
  font-weight: 700;
}

/* =========================================================================
   Typography Overrides
   ========================================================================= */
body, .nav-link-text, .brand-text-full, h1, h2, h3, h4, h5, h6, .btn, table th, table td {
  font-family: 'Outfit', sans-serif !important;
}

/* =========================================================================
   Sleek UI Tweaks (Modernizing the look without breaking layout)
   ========================================================================= */

/* Softer Card Shadows */
.card {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

/* Sleeker form controls */
.form-control, .input-group-text {
  border-color: rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease-in-out;
}
.form-control:focus, .input-group.focused .input-group-text {
  border-color: #c29e52 !important;
  box-shadow: 0 0 0 2px rgba(194, 158, 82, 0.2) !important;
}

/* =========================================================================
   Luxury Dark Theme Overrides
   ========================================================================= */
body.dark-version {
  background-color: #121212 !important; /* Deep obsidian */
}

body.dark-version > div[class*=bg-] {
  background-color: #121212 !important;
}

body.dark-version .sidenav,
body.dark-version .card,
body.dark-version .dropdown-menu {
  background-color: #1c1c1c !important; /* Premium dark grey */
}

/* Fix text-dark and bg-light classes inside dark-version */
body.dark-version .text-dark {
  color: rgba(255, 255, 255, 0.95) !important;
}

body.dark-version .bg-light {
  background-color: #242424 !important;
}

body.dark-version .text-secondary {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Sidenav link text visibility */
.dark-version .sidenav[data-color=primary] .navbar-nav > .nav-item > .nav-link.active .nav-link-text {
  color: #fff !important;
}

/* Table styles in dark mode */
body.dark-version .table thead th {
  background-color: #242424 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-version .table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Fix shadows to be softer in dark mode */
body.dark-version .card {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =========================================================================
   Global Select2 Overrides (Luxury Theme)
   ========================================================================= */
.select2-container .select2-selection--single {
    height: 38px;
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    color: #495057;
    font-family: 'Outfit', sans-serif !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
.select2-dropdown {
    border-color: #d2d6da;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025) !important;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #c29e52 !important;
    box-shadow: 0 0 0 2px rgba(194, 158, 82, 0.2) !important;
}
/* Select2 Dark Mode Support */
body.dark-version .select2-container .select2-selection--single,
body.dark-version .select2-container--default .select2-selection--multiple {
    background-color: #242424 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-version .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: rgba(255, 255, 255, 0.95) !important;
}
body.dark-version .select2-dropdown {
    background-color: #242424 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-version .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #1c1c1c !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
body.dark-version .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #344767 !important;
}
body.dark-version .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #d4af37 !important;
    color: white !important;
}

/* =========================================================================
   Flatpickr Luxury Theme (Younger Looks Clinic)
   ========================================================================= */
.flatpickr-calendar {
    font-family: 'Outfit', sans-serif !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    z-index: 9999999 !important;
}

.flatpickr-calendar .flatpickr-months {
    background: linear-gradient(310deg, #141727 0%, #3a416f 100%) !important;
    padding: 6px 0 !important;
}

.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .cur-month,
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-weight: 600 !important;
}

.flatpickr-calendar .flatpickr-weekdays {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef !important;
}

span.flatpickr-weekday {
    color: #8392ab !important;
    font-weight: 600 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.flatpickr-day:hover {
    background: #f3e5ab !important;
    color: #344767 !important;
}

.flatpickr-day.today {
    border-color: #d4af37 !important;
}

.flatpickr-day.today:hover {
    background: #d4af37 !important;
    color: #fff !important;
}

/* Ensure flatpickr alt-input inherits proper sizing and alignment */
input.flatpickr-alt-input {
    background-color: #ffffff;
    cursor: pointer;
}

input.flatpickr-alt-input[readonly].bg-light {
    background-color: #e9ecef !important;
    cursor: default;
}

.form-control-sm.flatpickr-alt-input {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
}

#tbl_rekamMedis input.flatpickr-alt-input,
.table-rekam-medis input.flatpickr-alt-input {
    padding: 2px 2px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
}

/* Dark version support */
body.dark-version .flatpickr-calendar {
    background: #111c44 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-version .flatpickr-calendar .flatpickr-weekdays {
    background: #1b254b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-version .flatpickr-day {
    color: #ffffff !important;
}

body.dark-version .flatpickr-day.prevMonthDay,
body.dark-version .flatpickr-day.nextMonthDay,
body.dark-version .flatpickr-day.flatpickr-disabled {
    color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-version input.flatpickr-alt-input {
    background-color: #0f1535 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version input.flatpickr-alt-input[readonly].bg-light {
    background-color: #1b254b !important;
}

/*

Select2

Global

Overrides

*/