/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@font-face {
  font-family: 'NotoSansLao';
  src: url("/fonts/NotoSansLao-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansLao';
  src: url("/fonts/NotoSansLao-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: bold;
}

body {
  font-family: "NotoSansLao", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial !important;
}

.float-right {
  float: right;
}

.fixed-content-header {
  box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 0px inset;
  width: 100%;
  position: fixed;
  right: 0px;
  top: 95px;
  padding: 15px;
  background-color: white;
  z-index: 1050;
}

label.required-field::after {
  content: " *";
  color: red;
  font-size: 0.85rem;
  font-weight: bold;
}

label {
  color: grey;
  font-size: 14px;
}

.btn-status-draft,
.btn-status-not_sent,
.btn-action_type-warning
{
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

.btn-action_type-deduct_score {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}

.btn-status-processing,
.btn-status-retired,
.btn-status-pending_completion,
.btn-action_type-survey_self,
.btn-status-pendding {
  --bs-btn-color: #fd7e14;
  --bs-btn-border-color: #fd7e14;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #fd7e14;
  --bs-btn-hover-border-color: #fd7e14;
  --bs-btn-focus-shadow-rgb: 253, 126, 20;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #fd7e14;
  --bs-btn-active-border-color: #fd7e14;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fd7e14;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fd7e14;
  --bs-gradient: none;
}

.btn-gender-male,
.btn-party_role-full_member,
.btn-status-active,
.btn-status-enabled,
.btn-status-completed,
.btn-action_type-suspention,
.btn-movement_type-movement_in
{
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-gender-female,
.btn-status-disabled,
.btn-status-inactive,
.btn-status-rejected,
.btn-status-cancelled,
.btn-party_role-candidate_member,
.btn-movement_type-movement_out,
.btn-action_type-termination {

  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-gradient: none;
}

.bg-status-draft, 
.bg-action_type-warning, 
.bg-status-not_sent 
{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-status-processing,
.bg-status-retired,
.bg-action_type-survey_self,
.bg-status-pendding,
.bg-status-pending_completion
{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-status-enabled,
.bg-gender-male,
.bg-status-completed,
.bg-status-active,
.bg-action_type-suspention,
.bg-movement_type-movement_in,
.bg-toggle-true,
.bg-party_role-full_member
{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-status-disabled,
.bg-status-inactive,
.bg-gender-female,
.bg-status-cancelled,
.bg-status-rejected,
.bg-status-retired,
.bg-action_type-termination,
.bg-movement_type-movement_out,
.bg-toggle-false,
.bg-party_role-candidate_member
{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-action_type-deduct_score {
  --bs-bg-opacity: 1;
  background-color: rgba(13, 110, 253, var(--bs-bg-opacity)) !important; /* #0d6efd */
}

.responsive-image-height {
  height: 150px;

  @media (min-width: 768px) {
    height: 200px;
  }

  @media (min-width: 992px) {
    height: 300px;
  }
}


/* ===== Commons::ElementGroupComponent ===== */
/* Stack title above content on mobile, side-by-side on desktop */
.element-group-title {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
  padding-top: 4px;
}

@media (max-width: 767.98px) {
  /* Override the col-2 / col-10 row to full width stacked */
  .element-group-title {
    margin-bottom: 4px;
  }
}

@media (max-width: 575.98px) {
  #content-header .d-flex.justify-content-between {
    flex-direction: column;
    gap: 10px;
  }

  #content-header .d-flex.gap-2 {
    width: 100%;
    justify-content: flex-end;
  }

  #content-header .btn {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* ===== Headers::Show/Edit/New Components ===== */
#content-header h4 {
  font-size: 1.1rem; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#content-header h4 .float-right {
  float: none !important; /* override the float */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 575.98px) {
  #content-header h4 {
    font-size: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  #content-header h4 .float-right {
    width: 100%;
    justify-content: flex-end;
  }

  #content-header h4 .btn {
    font-size: 12px;
    padding: 4px 9px;
  }
}

/* ===== Tables::TableComponent ===== */
.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .pos-table th,
  .pos-table td {
    font-size: 12px;
    padding: 8px 10px;
  }

  /* Hide less critical columns on mobile */
  .pos-table .col-hide-mobile {
    display: none;
  }

  /* Action buttons compact */
  .pos-table td .btn {
    padding: 3px 7px;
    font-size: 11px;
  }
}

/* ===== Form fields ===== */
@media (max-width: 767.98px) {
  .form-control,
  .form-select {
    font-size: 14px;
  }

  label {
    font-size: 12px;
  }
}
/* ===== Forms::FilterComponent ===== */
/* Target filter rows — the form's direct row children */
form .row.g-2.align-items-end > [class*="col-"] {
  min-width: 0; /* prevent overflow */
}

@media (max-width: 575.98px) {
  form .row.g-2.align-items-end > [class*="col-"] {
    width: 100% !important;
  }

  form .row.g-2.align-items-end .d-flex.gap-2 {
    width: 100%;
  }

  form .row.g-2.align-items-end .d-flex.gap-2 .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  form .row.g-2.align-items-end > [class*="col-"] {
    width: 50% !important;
  }
}
/* ===== Forms::FilterComponent mobile collapse ===== */
@media (max-width: 767.98px) {
  #filter-collapse {
    background-color: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
  }
}