/**
 * Global CSS - BEM Methodology
 * Uses CSS variables from theme.css for consistent theming
 */
 
@import url("/public/css/theme.css");
 
/* ========================================
 * BASE STYLES
 * ======================================== */
 
@font-face {
  font-family: "Inter";
  src: url("/public/fonts/Inter/Inter.ttf") format("truetype");
}
 
* {
  box-sizing: border-box;
}
 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
body {
  font-family: "Inter", "Verdana", "Arial", sans-serif;
  font-size: var(--gt-font-base, 14px);
  color: var(--gt-surface-900);
  /* background-color: var(--gt-surface-50); */
  line-height: 1.5;
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  min-width: 325px;
}
 
/* ========================================
 * TYPOGRAPHY
 * ======================================== */
 
.page__title {
  font-size: 40px;
  font-weight: 700;
  color: var(--gt-surface-900);
  margin-bottom: 1rem;
}
 
.page__subtitle {
  font-size: 30px;
  font-weight: 600;
  color: var(--gt-surface-800);
  margin-bottom: 0.75rem;
}
 
.page__heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--gt-surface-800);
  margin-bottom: 0.5rem;
}
 
.text--required {
  color: var(--gt-error);
}
 
.text--link {
  color: var(--gt-primary);
  text-decoration: underline;
  cursor: pointer;
}
 
.text--link:hover {
  color: var(--gt-primary-hover);
}
 
/* ========================================
 * ICONS (BEM)
 * ======================================== */
 
.detail-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
 
a:visited {
  color: var(--gt-surface-800);
}
/* ========================================
 * TRIFIELD (Cascading Selects)
 * ======================================== */
 
.form__trifield {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}
 
.form__trifield-level {
  flex: 1;
  min-width: 150px;
}
 

.pricing-page__formulary-info h3 {
  color: var(--gt-primary2);
}
/* ========================================
 * ACCORDION
 * ======================================== */
 
.accordion {
  background: var(--gt-white);
  border: 1px solid var(--gt-surface-200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
 
.accordion:last-child {
  margin-bottom: 0;
}
 
.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--gt-white);
  cursor: pointer;
  gap: 0.75rem;
  transition: background-color 0.2s;
}
 
.accordion__header:hover {
  background: var(--gt-primary2bg);
  /* var(--gt-surface-50);*/
}
 
.accordion__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
 
.accordion__actions .btn {
  white-space: nowrap;
}
 
@media (max-width: 767px) {
  .accordion__actions {
    flex-direction: column;
    align-items: stretch;
  }
}
 
.accordion__header-content {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  flex: 1;
}
 
.accordion__header-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
 
.accordion__header-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
 
.accordion__header-narrative {
  font-size: 0.875rem;
  color: var(--gt-surface-600);
}
 
.accordion__icon {
  font-size: 1rem;
  color: var(--gt-surface-500);
  margin-right: 0.5rem;
}
 
.accordion__title {
  font-weight: 600;
  color: var(--gt-surface-900);
  font-size: 0.875rem;
}
 
.accordion__summary {
  font-size: 0.9rem;
  color: var(--gt-surface-600);
}
 
.accordion__chevron {
  font-size: 0.875rem;
  color: var(--gt-surface-500);
  transition: transform 0.2s;
}
 
.accordion--expanded .accordion__chevron {
  transform: rotate(180deg);
}
 
.accordion__content {
  display: none;
  border-top: 1px solid var(--gt-surface-100);
  background: var(--gt-surface-50);
}
 
.accordion--expanded .accordion__content {
  display: block;
}
 
.accordion__body {
  padding: 1rem;
}
 
.accordion-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
 
/* ========================================
 * CONDITION OVERVIEW
 * ======================================== */
 
.condition-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
 
.overview-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--gt-white);
  border-bottom: 1px solid var(--gt-surface-200);
  margin: 0 1rem;
}
 
.overview-body-svg {
  width: 80px;
  height: 130px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
 
.overview-body-svg svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.patient-info {
  flex: 1;
}
 
.patient-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gt-primary2);
}
 
.condition-name {
  font-size: 0.875rem;
  color: var(--gt-surface-600);
  margin-top: 0.25rem;
}
 
.status-badge {
  padding: 0.25rem 0.75rem;
  background: var(--gt-primary2);
  color: white;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge--inactive {
  color: white !important;
  background: #dc2626 !important;
  border: 1px solid #dc2626;
}
 
.status-badge--closed {
  background: var(--gt-error) !important;
  color: white !important;
}

.status-badge--active {
  background: var(--gt-success) !important;
  color: white !important;
}

.status-badge--discharged {
  background: var(--gt-surface-400, #94a3b8) !important;
  color: white !important;
}

.status-badge--deceased {
  background: #eab308 !important;
  color: white !important;
}
 
.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--gt-surface-500);
}
 
.mt-3 {
  margin-top: 0.75rem;
}
 
/* ========================================
 * CONDITION ASSESSMENTS
 * ======================================== */
 
#header-title {
  font-size: 16px;
  font-weight: 400; /*700; */
  padding: 5px 0 5px 5px;
}
.condition-assessments {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
 
.assessments-header {
  position: sticky;
  top: 0;
  background: var(--gt-white);
  border-bottom: 1px solid var(--gt-surface-200);
  padding: 1rem;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
 
.new-assessment-btn {
  width: 100%;
}
 
.new-assessment-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
 
.date-dropdown-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: var(--gt-white);
  border-bottom: 1px solid var(--gt-surface-200);
  margin: 0 1rem;
}
 
.date-dropdown-container .date-dropdown {
  width: 50%;
  flex-shrink: 0;
}
 
.date-dropdown-container .assessments-action-btn {
  flex-shrink: 0;
}
 
@media (max-width: 767px) {
  .date-dropdown-container {
    flex-direction: column-reverse;
    align-items: stretch;
  }
 
  .date-dropdown-container .date-dropdown {
    width: 100%;
  }
}
 
.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
 
.detail-header-button-row {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  background: var(--gt-white);
  border-bottom: 1px solid var(--gt-surface-100);
}
 
.edit-button {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
}
 
.text-4xl {
  font-size: 2.25rem;
}
 
.mb-4 {
  margin-bottom: 1rem;
}
 
a.pricing-card:visited,
a.pricing-card {
  color: var(--gt-primary2);
  text-decoration: none !important;
  display: flex !important;
  gap: 5px 10px !important;
  font-size: 16px;
}
 
/* Pricing table — fixed columns so product/size/price align across accordions */
.pricing-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
 
.pricing-table th,
.pricing-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  /* vertical-align: left; */
}
 
.pricing-table__col-name {
  width: 55%;
}
 
.pricing-table__col-size {
  width: 25%;
}
 
.pricing-table__col-price {
  width: 20%;
  text-align: right;
}
 
.pricing-table__col-price .pricing-input {
  width: 100%;
  max-width: 120px;
}
 
/* ========================================
 * BUTTONS (BEM)
 * ======================================== */
 
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--fg-padding-normal, 12px) var(--fg-padding-loose, 16px);
  font-size: var(--fg-font-body, 14px);
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  border: 1px solid #cccccc;
  border-radius: var(--fg-border-radius-md, 6px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  gap: var(--fg-gap-compact, 8px);
  box-sizing: border-box;
  vertical-align: middle;
}
 
a.btn:visited,
a.btn {
  color: var(--gt-surface-800);
}
/* Remove browser default internal padding from buttons so they
   compute to the exact same dimensions as anchor elements. */
button.btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
 
.btn--primary {
  background-color: var(--fg-primary);
  color: white !important;
  border-color: var(--fg-primary, #0167ab);
}
 
.btn--primary:hover {
  background-color: var(--fg-primary-hover, #0284c7);
  border-color: var(--fg-primary-hover, #0284c7);
}
 
.btn--secondary {
  background-color: var(--gt-primary2);
  color: var(--gt-primary2bg);
  border-color: var(--gt-primary2);
}
 
.btn--secondary:hover {
  background-color: var(--gt-primary2bg);
  color: var(--gt-primary2);
}
 
.btn--success {
  background-color: var(--gt-new);
  color: var(--gt-newbg);
  border-color: var(--gt-new);
}
 
.btn--success:hover {
  background-color: var(--gt-newbg);
  color: var(--gt-new);
}
 
.btn--danger {
  background-color: var(--gt-error);
  color: white;
  border-color: var(--gt-error);
}
 
.btn--danger:hover {
  background-color: var(--gt-error-hover);
  border-color: var(--gt-error-hover);
}
 
.btn--outline {
  background-color: transparent;
  color: var(--gt-primary);
  border-color: var(--gt-primary);
}
 
.btn--outline:hover {
  background-color: var(--gt-primarybg);
  color: var(--gt-primary-hover);
}
 
.btn--outline-success {
  background-color: #ffffff;
  color: var(--gt-success) !important;
  border-color: var(--gt-success);
}

.btn--outline-success:hover {
  background-color: var(--gt-success);
  color: #ffffff !important;
}

.btn--outline-danger {
  background-color: #ffffff;
  color: var(--gt-error) !important;
  border-color: var(--gt-error);
}

.btn--outline-danger:hover {
  background-color: var(--gt-error);
  color: #ffffff !important;
}

.btn--ghost {
  background-color: var(--fg-surface, #ffffff);
  color: var(--fg-primary, #0167ab);
  border-color: transparent;
}
 
.btn--ghost:hover {
  background-color: var(--fg-slate-100, #f1f5f9);
  color: var(--fg-primary-hover, #0284c7);
}
 
.btn--action {
  display: flex;
  align-items: center;
  gap: var(--fg-gap-tight, 6px);
  padding: var(--fg-margin-compact, 8px) var(--fg-margin-medium, 16px);
  background: var(--fg-slate-100, #f1f5f9);
  border: 1px solid var(--fg-border, #e2e8f0);
  border-radius: var(--fg-border-radius-md, 6px);
  font-size: var(--fg-font-body, 14px);
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}
 
.btn--action:hover {
  background: var(--fg-slate-50, #f8fafc);
}
 
.btn--small {
  padding: var(--fg-margin-compact, 8px) var(--fg-margin-medium, 16px);
  font-size: var(--fg-font-meta, 12px);
}
 
.btn--large {
  padding: 0.75rem 1.5rem;
  font-size: var(--gt-font-lg, 18px);
}
 
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
 
.btn-outline-danger {
  color: red !important;
}
 
.view-patients {
  color: var(--gt-white) !important;
}
/* ========================================
 * FORMS (BEM)
 * ======================================== */
 
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--gt-primary3bg);
  /* border-left: 4px solid var(--gt-primary, #1b8bfb); */
  border-radius: 4px;
  padding: 1.25rem;
}
 
.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--gt-white);
}

.form .form__group {
  background: var(--gt-primary3bg);
}
 
/* Multi-select custom dropdown */
.form__multiselect {
  position: relative;
}
 
.form__multiselect-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--fg-padding-loose, 16px);
  height: var(--fg-input-height, 40px);
  border: 1px solid var(--gt-surface-300);
  border-radius: 4px;
  background-color: var(--gt-surface-50);
  cursor: pointer;
  font-size: var(--fg-font-body, 14px);
  color: var(--gt-surface-900);
}
 
.form__multiselect-trigger:hover {
  border-color: var(--gt-surface-400);
}
 
.form__multiselect-arrow {
  color: var(--gt-surface-500);
  font-size: 12px;
}
 
.form__multiselect-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--gt-surface-300);
  border-radius: 4px;
  background-color: var(--gt-surface-50);
  z-index: 1000;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
 
.form__multiselect-dropdown.open {
  display: block;
}
 
.form__multiselect-option {
  padding: 0;
}
 
.form__multiselect-option:hover {
  background-color: var(--gt-surface-100);
}
 
.form__multiselect-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  width: 100%;
  font-size: var(--fg-font-body, 14px);
  color: var(--gt-surface-900);
}
 
.form__multiselect-label input[type="checkbox"] {
  cursor: pointer;
}
 
.form__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gt-surface-900);
  padding-left: 12px;
}

.form .form__label {
  background: var(--gt-primary3bg);
}
 
.form__label--required::after {
  content: " *";
  color: var(--gt-error);
}
 
.form__input,
.form__select,
.form__textarea {
  padding: 0 14px;
  height: 36px;
  font-family: "Inter", monospace;
  font-size: 15px;
  font-weight: 400;
  color: var(--gt-surface-600);
  background-color: var(--gt-surface-50);
  border: 1px solid var(--fg-border-light, #cbd5e1);
  border-radius: var(--fg-border-radius-lg, 5px);
  width: 100%;
}
 
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--gt-primary);
  box-shadow: 0 0 0 2px var(--gt-primarybg);
}
 
.form__input:read-only,
.form__textarea:read-only {
  background-color: #f2faff;
  cursor: default;
}
 
.form__input::placeholder,
.form__select::placeholder,
.form__textarea::placeholder {
  color: var(--gt-form-field-placeholder);
}
 
.form__error {
  font-size: var(--gt-font-sm, 12px);
  color: var(--gt-error);
  margin-top: 0.25rem;
}

/* ========================================
 * FORM GROUP & LABELS (island-form pattern)
 * ======================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-slate-700, #334155);
}

.form-error {
  font-size: 0.75rem;
  color: var(--gt-error, #dc2626);
  margin-top: 0.25rem;
}

.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg-primary, #0167ab);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--fg-border, #e2e8f0);
}

.form-actions {
  padding-top: 1rem;
  border-top: 1px solid var(--fg-border, #e2e8f0);
}

.form__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
 
.form__actions--right {
  justify-content: flex-end;
}
 
.form__actions--center {
  justify-content: center;
}
 
/* Form grid — column layout controlled by inline style from editLayout */
.form__grid {
  display: grid;
  gap: 1rem;
}

@media (max-width: 767px) {
  .form__grid {
    grid-template-columns: 1fr !important;
  }
}

/* Assessments toolbar — date dropdown + action buttons */
.assessments-toolbar {
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .assessments-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .assessments-toolbar .date-dropdown {
    width: 100% !important;
  }

  .assessments-toolbar #assessments-action-container {
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 400px) {
  .assessments-toolbar #assessments-action-container {
    flex-direction: column;
    gap: 0.25rem;
  }

  .assessments-toolbar #assessments-action-container .btn {
    width: 100%;
  }
}

/* Tabs — responsive on narrow screens */
@media (max-width: 767px) {
  .tabs-container {
    padding: 0 0.5rem;
  }

  .tabs-nav {
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-item {
    padding: 0.75rem 0;
    white-space: nowrap;
  }
}
 
/* Toggle switch for boolean fields */
.toggle-buttons {
  display: flex;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
 
.toggle-switch {
  position: relative;
  width: 80px;
  height: 32px;
  border-radius: 16px;
  background: var(--gt-surface-100);
  transition: background 0.3s ease;
}
 
.toggle-switch[data-checked="true"] {
  background: var(--gt-primary);
}
 
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 40px;
  height: 28px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}
 
.toggle-switch[data-checked="true"] .toggle-knob {
  transform: translateX(36px);
}
 
/* ========================================
 * TABLES (BEM)
 * ======================================== */
 
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gt-font-base, 14px);
}
 
.table__header {
  background-color: var(--gt-surface-100);
  border-bottom: 2px solid var(--gt-surface-300);
}
 
.table__header th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--gt-surface-700);
  font-size: var(--gt-font-sm, 12px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
 
.table__row {
  border-bottom: 1px solid var(--gt-surface-200);
  transition: background-color 0.2s ease;
}
 
.table__row:hover {
  background-color: var(--gt-surface-100);
}
 
.table__row:nth-child(even) {
  background-color: var(--gt-surface-50);
}
 
.table__cell {
  padding: 0.75rem 1rem;
  color: var(--gt-surface-900);
}
 
.table__cell--number {
  text-align: right;
}
 
.table__cell--action {
  text-align: right;
  white-space: nowrap;
}
 
.table__empty {
  padding: 2rem;
  text-align: center;
  color: var(--gt-surface-500);
  font-style: italic;
}
 
/* ========================================
 * DETAIL LINE (Vue pattern - for detail panel, right-aligned)
 * ======================================== */
 
.detail-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--fg-margin-medium, 16px);
  padding: 4px 0;
}
 
.detail-line:last-child {
  border-bottom: none;
}
 
.detail-line__label {
  font-size: var(--fg-font-meta, 12px);
  font-weight: 400;
  color: var(--fg-primary, #0167ab);
  flex-shrink: 0;
}
 
.detail-line__value {
  font-size: var(--fg-font-meta, 12px);
  font-weight: 600;
  color: var(--fg-slate-900, #0f172a);
  text-align: right;
  word-break: break-word;
}
 
.detail-icon {
  font-size: var(--fg-font-meta, 12px);
  color: var(--fg-slate-600, #64748b);
}
 
/* ========================================
 * LIST CARD DETAIL LINE (for list cards, left-aligned)
 * ======================================== */
 
.list-card-detail-line {
  display: flex;
  align-items: center;
  gap: var(--fg-gap-compact, 8px);
  /* padding: 4px 0; */
}
 
.list-card-detail-line__value {
  font-size: var(--fg-font-meta, 12px);
  font-weight: 500;
  color: var(--fg-slate-900, #0f172a);
}
 
.list-card-detail-icon {
  font-size: var(--fg-font-meta, 12px);
  color: var(--fg-slate-600, #64748b);
}
 
/* ========================================
 * LOGIN PAGE (BEM)
 * ======================================== */
 
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--fg-slate-50, #f8f9fa);
  padding: var(--fg-padding-normal, 16px);
}
 
.login-card {
  width: 420px;
  max-width: 100%;
  background-color: var(--fg-surface, #ffffff);
  border-radius: var(--fg-border-radius-md, 8px);
  padding: 60px 40px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid var(--fg-border-light, #eee);
}
 
.login-card__logo {
  margin-bottom: var(--fg-margin-loose, 24px);
}
 
.login-card__logo-image img {
  max-height: 195px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}
 
.login-card__subtitle {
  text-align: center;
  margin-bottom: var(--fg-margin-xl, 32px);
}
 
.login-card__subtitle-text {
  color: var(--fg-primary, #0167ab);
  font-weight: 500;
  font-size: var(--fg-font-body, 14px);
}
 
.login-card__subtitle-text:hover {
  text-decoration: underline;
}
 
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--fg-margin-normal, 16px);
}
 
.login-form__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
 
.login-form__label {
  font-weight: 800;
  font-size: 1rem;
  color: var(--gt-surface-900);
}
 
.login-form__field {
  width: 100%;
}
 
.login-form__forgot {
  margin-top: 4px;
  text-align: right;
}
 
.login-form__forgot-link {
  font-size: 0.85rem;
  color: var(--fg-primary, #0167ab);
  text-decoration: none;
}
 
.login-form__forgot-link:hover {
  text-decoration: underline;
}
 
.login-form__actions {
  margin-top: 8px;
  width: 100%;
}
 
.btn--block {
  width: 100%;
}
 
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--fg-slate-50, #f8f9fa);
}
 
.loading-spinner__icon {
  border: 4px solid var(--fg-surface-100, #f3f3f3);
  border-top: 4px solid var(--fg-primary, #0167ab);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
/* ========================================
 * INFO GRID (Vue pattern)
 * ======================================== */
 
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2.5rem;
  row-gap: 0.75rem;
}
 
/* ========================================
 * DETAIL CARD (Right panel detail view)
 * ======================================== */
 
.detail-card {
  border: none;
  box-shadow: none;
  background: var(--fg-surface-50, #f8f9fa);
}

.detail-card--form {
  background: var(--gt-white, #ffffff);
  border: 1px solid var(--fg-border, #e2e8f0);
  border-radius: var(--fg-border-radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
 
.detail-card__sections {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--gt-white);
  /* background: var(--gt-surface-50); */
  /* padding: 0 1.5rem; */
  border-radius: var(--fg-border-radius-lg, 12px);
}
 
.detail-card__section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fg-slate-900, #0f172a);
  margin: 0 0 1.25rem 0;
}
 
.detail-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2.5rem;
}
 
.detail-card__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 4px 0;
}
 
@media (max-width: 1279px) {
  .detail-card__item {
    padding: 0;
  }
}
.detail-card__item--full-width {
  grid-column: span 2;
}
 
.detail-card__title span {
  color: var(--gt-primary2);
}
 
.detail-card__label {
  font-size: var(--fg-font-meta, 13px);
  font-weight: 500;
  color: var(--fg-primary, #0167ab);
  flex-shrink: 0;
}
 
.detail-card__value {
  font-size: var(--fg-font-meta, 13px);
  font-weight: 600;
  color: var(--fg-slate-900, #0f172a);
  text-align: right;
  word-break: break-word;
}
 
/* Responsive */
@media (max-width: 1279px) {
  .detail-card__grid {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
 
  .detail-card__item--full-width {
    grid-column: span 1;
  }
}
 
@media (max-width: 767px) {
  .detail-card__item {
    flex-direction: column;
    gap: 0.25rem;
  }
 
  .detail-card__value {
    text-align: left;
  }
 
  .detail-card__sections {
    gap: 0;
  }
}
 
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--fg-margin-medium, 16px);
  padding: 4px 0;
}
 
.info-label {
  font-size: var(--fg-font-meta, 12px);
  font-weight: 400;
  color: var(--fg-primary, #0167ab);
  flex-shrink: 0;
}
 
.info-value {
  font-size: var(--fg-font-meta, 12px);
  font-weight: 600;
  color: var(--fg-slate-900, #0f172a);
  text-align: right;
  word-break: break-word;
}
 
/* ========================================
 * ALLERGIES BOX (Figma pattern)
 * ======================================== */
 
.allergies-box {
  background: var(--fg-alert-bg, #fef2f2);
  border: 1px solid var(--fg-alert-border, #fecaca);
  border-radius: var(--fg-border-radius-lg, 8px);
  padding: var(--fg-padding-loose, 16px);
}
 
.allergies-box__title {
  font-size: var(--fg-font-meta, 12px);
  font-weight: 600;
  color: #7f1d1d;
  margin-bottom: var(--fg-margin-normal, 12px);
  text-transform: uppercase;
}
 
.allergies-box__item {
  font-size: var(--fg-font-body, 14px);
  color: #991b1b;
  padding: var(--fg-margin-tight, 4px) 0;
}
 
/* ========================================
 * CARDS (BEM)
 * ======================================== */
 
.card {
  background-color: var(--fg-surface, #ffffff);
  border-radius: var(--fg-border-radius-lg, 8px);
  box-shadow: var(--fg-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05));
  overflow: hidden;
}
 
.card-actions {
  margin: var(--fg-margin-tight, 4px);
  margin: 0 var(--fg-margin-compact, 8px);
  display: flex;
  flex-direction: row;
}
 
.card__header {
  padding: var(--fg-padding-loose, 24px);
  border-bottom: 1px solid var(--fg-border, #e2e8f0);
  background-color: var(--fg-surface, #ffffff);
}
 
.card__title {
  font-size: var(--fg-font-header, 16px);
  font-weight: 600;
  color: var(--fg-slate-900, #0f172a);
  margin: 0;
}
 
.card__body {
  padding: var(--fg-padding-loose, 24px);
}
 
.card__footer {
  padding: var(--fg-padding-normal, 16px) var(--fg-padding-loose, 24px);
  border-top: 1px solid var(--fg-border, #e2e8f0);
  background-color: var(--fg-surface-50, #f8f8f8);
  display: flex;
  justify-content: flex-end;
  gap: var(--fg-gap-compact, 8px);
}
 
/* ========================================
 * ALERTS (BEM)
 * ======================================== */
 
.alert {
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  border-left: 4px solid;
}
 
.alert--success {
  background-color: var(--gt-success-light);
  border-color: var(--gt-success);
  color: var(--gt-success);
}
 
.alert--warning {
  background-color: var(--gt-warning-light);
  border-color: var(--gt-warning);
  color: var(--gt-warning);
}
 
.alert--error {
  background-color: var(--gt-error-light);
  border-color: var(--gt-error);
  color: var(--gt-error);
}
 
.alert--info {
  background-color: var(--gt-info-bg);
  border-color: var(--gt-primary);
  color: var(--gt-primary);
}
 
.alert__title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
 
.alert__message {
  margin: 0;
}
 
/* ========================================
 * LIST CARD (Figma + Vue pattern)
 * ======================================== */
 
.list-card {
  display: block;
  background-color: var(--fg-surface, #ffffff);
  border-radius: var(--fg-border-radius-lg, 12px);
  padding: var(--fg-padding-loose, 16px);
  /* margin-bottom: var(--fg-margin-normal, 12px); */
  box-shadow: var(--fg-card-shadow, 0 2px 4px rgba(0, 0, 0, 0.04));
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--fg-border-light, #cbd5e1);
}
 
.user-list-scrollable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.list-card:hover {
  box-shadow: var(--fg-card-shadow-hover, 0 4px 12px rgba(162, 172, 180, 0.08));
  border-color: var(--fg-primary, #0167ab);
  transform: translateY(-1px);
}
 
.list-card.active {
  border: 2px solid var(--fg-primary, #0167ab);
  background-color: var(--fg-surface, #ffffff);
  box-shadow: var(--fg-card-shadow-active, 0 4px 12px rgba(1, 103, 171, 0.12));
}

.list-card--inactive {
  background-color: #fef2f2;
  border-color: #fecaca;
}
 
.list-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: var(--fg-margin-compact, 8px); */
}
 
.list-card__header-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
 
.list-card__title {
  font-size: var(--fg-font-title, 15px);
  font-weight: 600;
  color: var(--fg-primary, #0167ab);
}
 
.list-card.active .list-card__title {
  color: var(--fg-primary, #0167ab);
}
 
.list-card__actions {
  display: flex;
  gap: var(--fg-gap-tight, 4px);
  flex-shrink: 0;
}
 
.list-card__actions .btn {
  width: var(--fg-action-btn-size, 32px);
  height: var(--fg-action-btn-size, 32px);
  padding: 0;
  min-width: auto;
}
 
.list-card__meta {
  font-size: var(--fg-font-meta, 12px);
  color: var(--fg-slate-600, #64748b);
}
 
/* ========================================
 * PAGINATION (BEM)
 * ======================================== */
 
.pagination {
  display: flex;
  /* align-items: center; */
  gap: var(--fg-gap-compact, 8px);
  margin: 0.5rem 0;
  padding: var(--fg-padding-normal, 16px) var(--fg-padding-loose, 24px);
  /* background: var(--gt-surface-100); */
}
 
@media (max-width: 767px) {
  .pagination {
    background: var(--gt-white);
  }
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fg-btn-height, 40px);
  height: var(--fg-btn-height, 40px);
  border-radius: var(--fg-border-radius-md, 6px);
  font-size: var(--fg-font-body, 14px);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--fg-border, #e2e8f0);
  background: var(--fg-surface, #ffffff);
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
 
.pagination__item:hover {
  background-color: var(--fg-slate-100, #f1f5f9);
}
 
.pagination__item--active {
  background: var(--fg-primary, #0167ab);
  color: white;
  border-color: var(--fg-primary, #0167ab);
}
 
.pagination__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
 
.pagination__item--disabled:hover {
  background-color: var(--gt-white);
  border-color: var(--gt-surface-300);
}
 
.pagination__info {
  margin-left: 1rem;
  font-size: var(--gt-font-sm, 12px);
  color: var(--gt-surface-600);
}
 
/*
@media (max-width: 499px) {
  .pagination__page--far {
    display: none;
  }
}
*/
.list-card {
  /* margin: 4px; */
  padding: 1rem;
}
 
/* user */
 
.user-detail__wrapper2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: 5px;  */
  max-width: 100%;
  /* margin: 40px auto;  */
  /* padding: 8px; */
}
.user-detail__wrapper1 {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: 5px;  */
  max-width: 100%;
  /* margin: 40px auto;  */
  /* padding: 8px; */
}
.user-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* gap: 8px; */
  /* border-bottom: 1px solid #ddd;  */
}
 
/* Product Manager Styles */
.product-category {
  margin-bottom: 0.5rem;
  border: 1px solid var(--gt-border, #e2e8f0);
  border-radius: 4px;
}
 
.product-category__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: var(--gt-surface-50, #f8fafc);
  cursor: pointer;
  transition: background-color 0.2s;
}
 
.product-category__header:hover {
  background-color: var(--gt-primary2bg, #f1f5f9);
}
 
.product-category__title {
  font-weight: 500;
  color: var(--gt-primary, #3b82f6);
}
 
.product-category__actions {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
}
 
.product-category__content {
  padding: 0.5rem 1rem;
  background-color: var(--gt-white, #ffffff);
}
 
.product-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.product-list__item {
  padding: 0.1rem 0.75rem 0.1rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
 
.product-list__item:hover {
  color: var(--gt-surface-600);
  background-color: var(--gt-surface-50, #f8fafc);
}
 
.product-list__item--selected {
  background-color: var(--gt-info-bg, #dbeafe);
  border-left: 4px solid var(--gt-primary, #3b82f6);
}
 
.product-list__item--empty {
  color: var(--fg-slate-500, #64748b);
  font-style: italic;
  padding: 0.5rem 0.75rem;
}
 
.product-list__link {
  color: var(--gt-surface-700);
  text-decoration: none;
  font-weight: 400;
}
 
.product-list__link:hover {
  color: var(--gt-primary, #3b82f6);
}
 
.product-list__item--selected .product-list__link {
  color: var(--gt-primary, #3b82f6);
  font-weight: 500;
}
 
.detail-table {
  width: 100%;
  border-collapse: collapse;
}
 
.detail-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--gt-border, #e2e8f0);
}
 
.detail-table__label {
  font-weight: 500;
  color: var(--gt-surface-900, #0f172a);
  width: 25%;
}
 
.detail-table__value {
  color: var(--gt-surface-600, #475569);
}
 
.user-label {
  font-weight: 600;
  color: var(--gt-surface-800);
}
 
.user-value {
  font-weight: 500;
  color: var(--gt-surface-600);
}
 
/* ========================================
 * UTILITY CLASSES
 * ======================================== */
 
.hidden {
  display: none !important;
}
 
.visible {
  display: block !important;
}
 
.text-center {
  text-align: center;
}
 
.text-right {
  text-align: right;
}
 
.text-left {
  text-align: left;
}
 
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.mt-5 {
  margin-top: 2rem;
}
 
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 1rem;
}
.mb-4 {
  margin-bottom: 1.5rem;
}
.mb-5 {
  margin-bottom: 2rem;
}
 
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}
.p-4 {
  padding: 1.5rem;
}
.p-5 {
  padding: 2rem;
}
 
.flex {
  display: flex;
}
.flex--center {
  align-items: center;
  justify-content: center;
}
.flex--between {
  justify-content: space-between;
}
.flex--column {
  flex-direction: column;
}
.flex--wrap {
  flex-wrap: wrap;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 1rem;
}
.gap-4 {
  gap: 1.5rem;
}
 
/* ========================================
 * ERROR PAGES
 * ======================================== */
 
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
 
.error-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}
 
.error-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}
 
.error-icon--validation {
  color: var(--gt-warning);
}
 
.error-icon--not-found {
  color: var(--gt-surface-400);
}
 
.error-icon--unauthorized {
  color: var(--gt-primary);
}
 
.error-icon--forbidden {
  color: var(--gt-error);
}
 
.error-icon--server {
  color: var(--gt-error);
}
 
.error-icon--network {
  color: var(--gt-warning);
}
 
.error-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gt-surface-900);
  margin-bottom: 1rem;
}
 
.error-message {
  font-size: 1.125rem;
  color: var(--gt-surface-600);
  margin-bottom: 2rem;
  line-height: 1.6;
}
 
.error-details {
  background-color: var(--gt-surface-100);
  border: 1px solid var(--gt-surface-200);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}
 
.error-details h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gt-surface-900);
  margin-top: 0;
  margin-bottom: 1rem;
}
 
.error-field-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.error-field-item {
  padding: 0.5rem 0;
  color: var(--gt-surface-700);
  border-bottom: 1px solid var(--gt-surface-200);
}
 
.error-field-item:last-child {
  border-bottom: none;
}
 
.error-stack {
  background-color: var(--gt-surface-800);
  color: var(--gt-surface-100);
  padding: 1rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.875rem;
  overflow-x: auto;
  margin-top: 1rem;
}
 
.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
 
/* ========================================
 * ALERTS
 * ======================================== */
 
.alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  position: relative;
}
 
.alert-error {
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
 
.alert-warning {
  background-color: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
}
 
.alert-success {
  background-color: #d1fae5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
 
.alert-info {
  background-color: #dbeafe;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
 
.alert-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
 
.alert-content {
  flex: 1;
}
 
.alert-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}
 
.alert-message {
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.4;
}
 
.alert-field-errors {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
}
 
.alert-field-errors li {
  padding: 0.125rem 0;
}
 
.alert-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
 
.alert-close:hover {
  opacity: 1;
}
 
/* ========================================
 * HTMX INDICATORS
 * ======================================== */
 
.htmx-indicator {
  display: none;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
}
 
.htmx-indicator.htmx-request {
  display: inline-block;
}
 
.htmx-indicator.htmx-request.htmx-indicator-inline {
  display: inline-block;
}
 
.htmx-indicator.htmx-request.htmx-indicator-block {
  display: block;
}
 
/* ========================================
 * LOADING SPINNER
 * ======================================== */
 
.loading-spinner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
 
.loading-spinner__icon {
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
}
 
.loading-spinner__circle {
  stroke: var(--gt-primary);
  stroke-linecap: round;
  stroke-dasharray: 1, 150;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}
 
.loading-spinner__text {
  font-size: 0.875rem;
  color: var(--gt-surface-600);
}
 
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
 
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
 
/* ========================================
 * LOADING BAR
 * ======================================== */
 
.loading-bar {
  width: 100%;
  height: 0.25rem;
  background-color: var(--gt-surface-200);
  overflow: hidden;
}
 
.loading-bar__progress {
  height: 100%;
  background-color: var(--gt-primary);
  animation: loading-bar 1.5s ease-in-out infinite;
  width: 30%;
}
 
@keyframes loading-bar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
 
/* ========================================
 * LOADING DOTS
 * ======================================== */
 
.loading-dots {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
 
.loading-dots__dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--gt-primary);
  border-radius: 50%;
  animation: loading-dots 1.4s ease-in-out infinite both;
}
 
.loading-dots__dot:nth-child(1) {
  animation-delay: -0.32s;
}
 
.loading-dots__dot:nth-child(2) {
  animation-delay: -0.16s;
}
 
@keyframes loading-dots {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
 
/* ========================================
 * TOAST NOTIFICATIONS
 * ======================================== */
 
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 24rem;
  pointer-events: none;
}
 
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: var(--gt-surface);
  border: 1px solid var(--gt-surface-200);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: auto;
  transition: opacity 0.3s ease;
  opacity: 1;
}
 
.toast--success {
  border-left: 4px solid #10b981;
}
 
.toast--success .toast__icon {
  color: #10b981;
}
 
.toast--error {
  border-left: 4px solid #ef4444;
}
 
.toast--error .toast__icon {
  color: #ef4444;
}
 
.toast--warning {
  border-left: 4px solid #f59e0b;
}
 
.toast--warning .toast__icon {
  color: #f59e0b;
}
 
.toast--info {
  border-left: 4px solid #3b82f6;
}
 
.toast--info .toast__icon {
  color: #3b82f6;
}
 
.toast__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
 
.toast__content {
  flex: 1;
}
 
.toast__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gt-surface-900);
  margin: 0 0 0.25rem 0;
}
 
.toast__message {
  font-size: 0.875rem;
  color: var(--gt-surface-600);
  margin: 0;
  line-height: 1.4;
}
 
.toast__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--gt-surface-400);
  transition: color 0.2s;
  flex-shrink: 0;
}
 
.toast__close:hover {
  color: var(--gt-surface-600);
}
 
/* ========================================
 * BUTTON LOADING STATE
 * ======================================== */
 
.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}
 
.btn--loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
 
/* ========================================
 * SKELETON LOADING
 * ======================================== */
 
.skeleton {
  background-color: var(--gt-surface-200);
  border-radius: 0.25rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
 
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
 
.skeleton--text {
  height: 1rem;
  margin-bottom: 0.5rem;
}
 
.skeleton--text:last-child {
  margin-bottom: 0;
}
 
.skeleton--avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
 
.skeleton--card {
  height: 8rem;
}
 
/* ========================================
 * MODAL
 * ======================================== */
 
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
 
.modal--open {
  display: flex;
}
 
.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
.modal__container {
  position: relative;
  background-color: var(--gt-surface);
  border-radius: 0.5rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 1024px;
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modal-slide-in 0.3s ease-out;
}
 
@media (min-width: 767px) {
  .modal__container {
    width: 90%;
  }
}
 
@keyframes modal-slide-in {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
 
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--gt-surface-200);
  background: var(--gt-surface-50);
}
 
.modal__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gt-surface-900);
  margin: 0;
}
 
.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--gt-surface-400);
  transition: color 0.2s;
  border-radius: 0.25rem;
}
 
.modal__close:hover {
  color: var(--gt-surface-600);
  background-color: var(--gt-surface-100);
}
 
.modal__body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  background: var(--gt-white);
}
 
.modal__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1.25rem;
  border-top: 1px solid var(--gt-surface-200);
}
 
/* ========================================
 * CONFIRMATION MODAL
 * ======================================== */
 
.modal-confirm {
  text-align: center;
  padding: 1rem 0;
}
 
.modal-confirm__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}
 
.modal-confirm__icon--danger {
  color: #ef4444;
}
 
.modal-confirm__icon--warning {
  color: #f59e0b;
}
 
.modal-confirm__icon--success {
  color: #10b981;
}
 
.modal-confirm__icon--info {
  color: #3b82f6;
}
 
.modal-confirm__message {
  font-size: 1.125rem;
  color: var(--gt-surface-900);
  margin: 0 0 0.5rem 0;
  line-height: 1.6;
}
 
.modal-confirm__details {
  font-size: 0.875rem;
  color: var(--gt-surface-600);
  margin: 0;
  line-height: 1.6;
}
 
/* ========================================
 * FORM MODAL
 * ======================================== */
 
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
 
.modal-form .form__group {
  margin-bottom: 0;
}
 
/* ========================================
 * FILE UPLOAD
 * ======================================== */
 
.file-upload {
  width: 100%;
}
 
.file-upload__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gt-surface-700);
  margin-bottom: 0.5rem;
}
 
.file-upload__required {
  color: #ef4444;
  margin-left: 0.25rem;
}
 
.file-upload__dropzone {
  border: 2px dashed var(--gt-surface-300);
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  position: relative;
}
 
.file-upload__dropzone:hover,
.file-upload__dropzone--active {
  border-color: var(--gt-primary);
  background-color: var(--gt-primarybg);
}
 
.file-upload__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
 
.file-upload__content {
  pointer-events: none;
}
 
.file-upload__icon {
  font-size: 3rem;
  color: var(--gt-surface-400);
  margin-bottom: 1rem;
}
 
.file-upload__text {
  font-size: 1rem;
  color: var(--gt-surface-700);
  margin: 0 0 0.5rem 0;
}
 
.file-upload__link {
  color: var(--gt-primary);
  text-decoration: underline;
  cursor: pointer;
}
 
.file-upload__hint {
  font-size: 0.875rem;
  color: var(--gt-surface-500);
  margin: 0.25rem 0 0 0;
}
 
.file-upload__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
 
.file-upload__file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--gt-surface-100);
  border-radius: 0.375rem;
  border: 1px solid var(--gt-surface-200);
}
 
.file-upload__file-preview {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
}
 
.file-upload__file-icon {
  font-size: 1.5rem;
  color: var(--gt-surface-400);
}
 
.file-upload__file-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--gt-surface-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}
 
.file-upload__file-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--gt-surface-400);
  transition: color 0.2s;
  border-radius: 0.25rem;
}
 
.file-upload__file-remove:hover {
  color: #ef4444;
  background-color: var(--gt-surface-200);
}
 
.file-upload__error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #ef4444;
  min-height: 1.25rem;
}
 
.file-upload__error--visible {
  display: block;
}
 
/* ========================================
 * MULTI-SELECT
 * ======================================== */
 
.multi-select {
  width: 100%;
  position: relative;
}
 
.multi-select__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gt-surface-700);
  margin-bottom: 0.5rem;
}
 
.multi-select__required {
  color: #ef4444;
  margin-left: 0.25rem;
}
 
.multi-select__input {
  display: none;
}
 
.multi-select__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
 
.multi-select__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--gt-primary);
  color: white;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
 
.multi-select__tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: white;
  opacity: 0.8;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.multi-select__tag-remove:hover {
  opacity: 1;
}
 
.multi-select__dropdown-trigger {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gt-surface-300);
  border-radius: 0.375rem;
  background-color: white;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
 
.multi-select__dropdown-trigger:hover {
  border-color: var(--gt-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
 
.multi-select__search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--gt-surface-700);
  background: transparent;
}
 
.multi-select__search::placeholder {
  color: var(--gt-surface-400);
}
 
.multi-select__placeholder {
  flex: 1;
  font-size: 0.875rem;
  color: var(--gt-surface-400);
}
 
.multi-select__chevron {
  color: var(--gt-surface-400);
  transition: transform 0.2s;
  margin-left: 0.5rem;
}
 
.multi-select__chevron--open {
  transform: rotate(180deg);
}
 
.multi-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 0.25rem;
  background-color: white;
  border: 1px solid var(--gt-surface-300);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  display: none;
  max-height: 15rem;
  overflow-y: auto;
}
 
.multi-select__dropdown--open {
  display: block;
}
 
.multi-select__options {
  padding: 0.5rem 0;
}
 
.multi-select__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
 
.multi-select__option:hover {
  background-color: var(--gt-surface-100);
}
 
.multi-select__option--selected {
  background-color: var(--gt-primarybg);
}
 
.multi-select__checkbox {
  cursor: pointer;
}
 
.multi-select__option-label {
  flex: 1;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--gt-surface-700);
}
 
.multi-select__no-results {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gt-surface-500);
  display: none;
}
 
/* ========================================
 * TABS (Vue pattern)
 * ======================================== */
 
.tabs-container {
  border-bottom: 1px solid var(--gt-surface-200);
  background: var(--gt-surface-50);
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}
 
.tabs-nav {
  display: flex;
  gap: 2rem;
}
 
.tab-item {
  padding: 1rem 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gt-surface-500);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
 
.tab-item:hover {
  color: var(--gt-primary);
}
 
.tab-item--active {
  color: var(--gt-primary);
  border-bottom-color: var(--gt-primary);
}
 
.tab-item__icon {
  font-size: 1rem;
}
 
/* ========================================
 * CONDITION CARDS (Vue pattern)
 * ======================================== */
 
.condition-card {
  background: var(--gt-white);
  border: 1px solid var(--gt-surface-200);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  transition: all 0.2s ease;
  /* margin-bottom: 0.75rem; */
}
 
.condition-card:hover {
  border-color: var(--gt-primary-300);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
 
.condition-card--closed {
  opacity: 0.8;
  background: var(--gt-surface-50);
}
 
.condition-card__visual {
  width: 80px;
  height: 130px;
  /* background: var(--gt-primarybg); */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
 
.condition-card__visual svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.condition-card__icon {
  font-size: 1.5rem;
  color: var(--gt-primary);
}
 
.condition-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
 
.condition-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
 
.condition-card__id {
  font-weight: 700;
  color: var(--gt-surface-500);
}
 
.condition-card__name {
  font-weight: 600;
  color: var(--gt-primary2);
}
 
.condition-card__common_name {
  font-weight: 500;
  color: var(--gt-primary2);
}

.condition-card__location {
  font-size: 0.875rem;
  color: var(--gt-primary);
  font-weight: 500;
}
 
.condition-card__date {
  font-size: 0.8125rem;
  color: var(--gt-surface-600);
}
 
.condition-card__date-label {
  font-weight: 500;
  color: var(--gt-surface-800);
}
 
.condition-card__common_name {
  font-size: 0.8125rem;
  color: var(--gt-surface-600);
}
 
.condition-card__common_name-label {
  font-weight: 500;
  color: var(--gt-surface-800);
}
 
.condition-card__badges {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
 
.badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge--inactive {
  color: #dc2626;
  border: 1px solid #dc2626;
  background: transparent;
}

.badge--active {
  color: #16a34a;
  border: 1px solid #16a34a;
  background: transparent;
}

.badge--wound {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #ffedd5;
}
 
.badge--lymph {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #e0f2fe;
}
 
/* ========================================
 * IMAGES TAB
 * ======================================== */
 
.condition-images {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
 
.images-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--gt-white);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-200);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
  gap: 1.5rem;
}
 
.controls-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
 
.group-label {
  font-weight: 700;
  color: var(--gt-surface-500);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
 
.button-group {
  display: flex;
  gap: 0.5rem;
}
 
.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
 
.tag--success {
  background: var(--gt-success-100);
  color: var(--gt-success-700);
}
 
.images-display {
  background: var(--gt-white);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-200);
  overflow: hidden;
}
 
.uploader-container {
  padding: 2rem;
}
 
/*.lightable {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
 
.lighttable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
 
.lighttable-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
 
.lighttable-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gt-surface-900);
  margin: 0;
}
 
.image-date {
  font-size: 0.8125rem;
  color: var(--gt-surface-600);
}
 
.lighttable-viewport {
.lighttable-viewport {
cbackground: var(--gt-surface-100);
  border-radius: 8px;  boin-height: 400px;
  display:  display:  display:  denter;
  justify-content: center;
}
 
.viewport-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.placeholder-image {
  text-align: center;
  color: var(--gt-surface-500);
}
 
.placeholder-image i {
  margin-bottom: 0.5rem;
}
 
.viewport-controls {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
 
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gt-wh  background: varpx solid var(--gt-surface-200);
  box-shadow: 0 2px 4px rgba(0, 0, 0,   box-sha.btn-icon:hover:not(:disabled)  box-shadow: 0: va  box-shadow: 0 2p;
}
 
.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
 
.thumbnail-scroller {
  background: var(--gt-surface-50  background: var(--gpx  background: var(--gov  background: var(--gt-surfacetrack {
  display: flex;
  gap: 0.5rem;
  min-hei  min-hei  min-hei  min-hei  min-hei {
                          flex;
  align-items: ce  align-itemsfy  align-items:er;
  color: var(--gt-surface-500);
  font  font  font  font 
  Graphs .5rem;
  background: var(--gt-white);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-200);
}
 
.section-title {
  margin: 0 0 1.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gt-surface-900);
}
 
.......-grid {
  display: gr  display: gr plate-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}
 
.chart-card {
  padd  padd  padd  padd  padd  padd  padd  padd  padd  padd  padd  padd  pad
  border: 1px solid var(--gt-surface-100);
}
 
.chart-title {
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  font-weigh  font-weigh  font-r(--gt-surface-700);
  text-transform: upper  text-transfo-spacing  text-transform: upper  text-transfo-spacing  text-transform: upper  text-transfo-spacing  text-transform: upper  ;
  text-transforgt  text-tra00);
  textdia (max-width: 768px) {
  .images-control  .images-control  .images-conlumn;
    align-items: stretch;
  }
   
  .controls-group {
    justify-content: spac    justify-content:.charts-grid {
    grid-template-columns: 1fr;
  }
} */
 
/* ========================================
 * MODAL OVERLAY & CARD (for HTMX-injected modals)
 * ======================================== */
 
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
 
.modal-card {
  background: var(--gt-white);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-card-in 0.2s ease-out;
}
 
@keyframes modal-card-in {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
 
.modal-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gt-surface-200);
}
 
.modal-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gt-surface-900);
  margin: 0;
}
 
.modal-card__close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--gt-surface-500);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
}
 
.modal-card__close:hover {
  color: var(--gt-surface-700);
  background: var(--gt-surface-100);
}
 
.modal-card__body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}
 
.modal-card__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--gt-surface-200);
}
 
/* ========================================
 * DATA TABLE
 * ======================================== */
 
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
 
.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--gt-surface-200);
}
 
.data-table th {
  background: var(--gt-surface-50);
  font-weight: 600;
  color: var(--gt-surface-700);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
 
.data-table__row {
  transition: background-color 0.15s;
}
 
.data-table__row:hover {
  background: var(--gt-surface-50);
}

.data-table a {
  text-decoration: none;
  color: var(--gt-primary, #0167ab);
}
.data-table a:visited {
  color: var(--gt-primary, #0167ab);
}
 
/* ========================================
 * FORMULARY MANAGER
 * ======================================== */
 
.formulary-list__search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
 
.formulary-list__search .input {
  flex: 1;
  min-width: 200px;
}
 
.formulary-editor__details {
  background: var(--gt-surface-50);
  border-left: 4px solid var(--gt-primary);
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
 
.formulary-editor__details h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  color: var(--gt-surface-900);
}
 
.formulary-editor__type {
  font-weight: 400;
  color: var(--gt-surface-600);
  font-size: 0.875rem;
}
 
.formulary-editor__descr {
  margin: 0;
  color: var(--gt-surface-600);
  font-size: 0.875rem;
}
 
.formulary-editor__categories {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
 
.formulary-editor__category-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
}
 
@media (max-width: 767px) {
  .formulary-editor__category-body {
    grid-template-columns: 1fr;
  }
  .formulary-editor__controls {
    flex-direction: row !important;
    justify-content: center;
  }
}
 
.formulary-panel {
  background: var(--gt-white);
  border: 1px solid var(--gt-surface-200);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 150px;
}
 
.formulary-panel__header {
  background: var(--gt-surface-50);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gt-surface-700);
  text-transform: uppercase;
  border-bottom: 1px solid var(--gt-surface-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.formulary-panel__select-all {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-transform: none;
  font-weight: 400;
  font-size: 0.75rem;
  cursor: pointer;
}
 
.formulary-panel__body {
  padding: 0.5rem;
  overflow-y: auto;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
 
.formulary-editor__controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
  margin-top: 2.3rem;
}
 
.product-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.1s;
  font-size: 0.875rem;
}
 
.product-row:hover {
  background: var(--gt-surface-100);
}
 
.product-checkbox {
  cursor: pointer;
}
 
.product-row__name {
  flex: 1;
  color: var(--gt-surface-900);
}
 
.product-row__size {
  color: var(--gt-surface-500);
  font-size: 0.75rem;
}
 
.product-row--empty {
  padding: 1rem;
  text-align: center;
  color: var(--gt-surface-400);
  font-size: 0.875rem;
  font-style: italic;
}
 
/* Summary table inside modal */
.formulary-summary__category {
  margin-bottom: 1.5rem;
}
 
.formulary-summary__cat-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gt-surface-800);
  margin: 20px 0 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--gt-surface-200);
}
 
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
 
.summary-table th,
.summary-table td {
  border: 1px solid var(--gt-surface-200);
  padding: 0.375rem 0.75rem;
  text-align: left;
}
 
.summary-table th {
  background: var(--gt-surface-100);
  font-weight: 600;
  color: var(--gt-surface-700);
}
 
.col-sku {
  width: 15%;
}
.col-name {
  width: 50%;
}
.col-size {
  width: 15%;
}
 
.category-list__name,
.category-accordion__title {
  font-weight: 600;
}
 
.category-list__item,
.category-accordion__header {
  margin: 5px 10px;
  cursor: pointer;
}
 
.prod_name,
.prod_count {
  color: var(--gt-primary2) !important;
  font-weight: 400;
}
 
.prod_normal {
  font-weight: normal;
}
/* ========================================
 * IMAGES TAB & LIGHTBOX
 * ======================================== */
 
.images-tab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
 
.images-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--gt-white);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-200);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
  gap: 1rem;
}
 
.images-controls-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
 
.images-controls-label {
  font-weight: 700;
  color: var(--gt-surface-500);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
 
.images-button-group {
  display: flex;
  gap: 0.5rem;
}
 
.images-type-tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gt-success);
  background: var(--gt-success-bg, rgba(16, 185, 129, 0.1));
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
 
.images-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  background: var(--gt-white);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-200);
  color: var(--gt-surface-400);
}
 
.images-empty-state p {
  margin: 0;
  color: var(--gt-surface-500);
}
 
/* Lightbox Modal */
.lightbox {
  background: var(--gt-surface-900);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  /* Fixed sizing: use the narrower viewport dimension, never collapse */
  width: 100%;
  max-width: min(1200px, 90vw);
  max-height: 90vh;
  min-width: 320px;
  min-height: 400px;
}
 
.lightbox__viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}
 
.lightbox__image-wrapper {
  position: relative;
  width: min(600px, 70vw, 70vh);
  height: min(600px, 70vw, 70vh);
  min-width: 280px;
  min-height: 280px;
  aspect-ratio: 1 / 1;
  background: var(--gt-surface-800);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.lightbox__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.lightbox__info-bar {
  display: flex;
  gap: 1rem;
  /* padding: 0.5rem 1rem; */
  justify-content: center;
  color: var(--gt-primary);
  background: var(--gt-surface-900);
  /* var(--gt-surface-300);*/
  font-size: 0.8125rem;
  /* margin: 20px 0; */
}
 
.lightbox__info-bar span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
 
.lightbox__info-bar i {
  opacity: 0.8;
  font-size: 0.75rem;
}
 
.lightbox__nav-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--gt-surface-700);
  color: var(--gt-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
 
.lightbox__nav-btn:hover:not(:disabled) {
  background: var(--gt-primary);
}
 
.lightbox__nav-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
 
/* Thumbnails Bar */
.lightbox__thumbnails-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 700px;
}
 
.lightbox__bookend {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--gt-surface-700);
  color: var(--gt-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
 
.lightbox__bookend:hover:not(:disabled) {
  background: var(--gt-primary);
}
 
.lightbox__bookend--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
 
.lightbox__thumbnails {
  display: flex;
  gap: 0.5rem;
  overflow: hidden;
  justify-content: center;
  flex: 1;
}
 
.lightbox__thumb {
  flex: 0 0 calc(16.666% - 0.4rem);
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    border-color 0.2s,
    transform 0.2s;
  background: var(--gt-surface-800);
  min-width: 0;
}
 
.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
 
.lightbox__thumb:hover {
  border-color: var(--gt-surface-400);
  transform: scale(1.05);
}
 
.lightbox__thumb--active {
  border-color: var(--gt-primary);
}
 
.lightbox__counter {
  color: var(--gt-surface-300);
  font-size: 0.8125rem;
  text-align: center;
}
 
@media (max-width: 768px) {
  .btn {
    padding: 8px;
  }
 
  .product-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    border: 1px solid var(--gt-surface-400);
  }
 
  .product-card__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg-slate-900, #0f172a);
    line-height: 1.3;
    flex: 1;
  }
 
  .lightbox__viewport {
    position: relative;
    gap: 0;
  }
 
  .lightbox__image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
  }
 
  .lightbox__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    z-index: 2;
    opacity: 0.85;
  }
 
  .lightbox__nav-btn--prev {
    left: 0.25rem;
  }
 
  .lightbox__nav-btn--next {
    right: 0.25rem;
  }
 
  .lightbox__thumbnails-bar {
    max-width: 100%;
  }
 
  .images-controls-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.5rem;
  }
 
  .images-controls-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
 
  .images-controls-label {
    padding-left: 4px;
  }
 
  .images-btn-icon {
    display: none !important;
  }
 
  .images-button-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
 
  .lightbox__info-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
    color: var(--gt-surface-300);
  }
}
 
/* ========================================
 * FACILITY-NURSE MANAGER
 * ======================================== */
 
.facility-nurse-manager {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--gt-surface-300);
}
 
/* .facility-nurse-manager .facility-mode { */
/* background-color: #fffefa;*/
/* border-color: var(--gt-success);  */
/* } */
 
.facility-nurse-manager.nurse-mode {
  background-color: #fff;
  /* border-color: var(--gt-primary); */
}
 
.facility-nurse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
 
.facility-nurse-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--gt-surface-900);
}
 
.facility-nurse-mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
 
.mode-label {
  font-size: 0.875rem;
  color: var(--gt-surface-600);
}
 
.facility-nurse-selector {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
 
.selector-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gt-surface-600);
}
 
.selector-search {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
 
.selector-search .input {
  flex: 1;
  min-width: 200px;
}
 
.selected-primary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--gt-surface-50);
  border-radius: 0.375rem;
  border: 1px solid var(--gt-surface-200);
}
 
.selected-name {
  font-weight: 600;
  color: var(--gt-surface-900);
  flex: 1;
}
 
.selector-results {
  margin-top: 0.5rem;
}
 
/* ========================================
 * PRODUCT PICKER
 * ======================================== */
 
.product-picker {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}
 
.product-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--gt-white);
  border-bottom: 1px solid var(--gt-surface-200);
  border-radius: var(--fg-border-radius-md, 6px) var(--fg-border-radius-md, 6px)
    0 0;
}
 
.product-picker__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg-slate-900, #0f172a);
}
 
.product-picker__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
 
.product-tag {
  color: var(--gt-primary3);
  /* background: var(--gt-primary2bg); */
}
 
.product-tag2 {
  color: var(--gt-primary);
  /* background: var(--gt-primary2bg); */
}
.product-tag:hover {
  color: var(--gt-surface-700);
  background: var(--gt-primary2bg);
}
 
/* Kanban Board */
.product-picker__board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
}
 
/* Product Column */
.product-column {
  display: flex;
  flex-direction: column;
  background: var(--gt-surface-50, #f8f8f8);
  border-radius: var(--fg-border-radius-md, 6px);
  border: 1px solid var(--gt-surface-200);
  overflow: hidden;
}
 
.product-column__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.875rem;
  background: var(--gt-white);
  border-bottom: 1px solid var(--gt-surface-200);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--gt-primary2);
}
 
.product-column__count {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-slate-500, #64748b);
  background: var(--gt-surface-100);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}
 
.product-column__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
 
@media (max-width: 768px) {
  /* Product Card */
  .product-card {
    /* background: var(--gt-white); */
    border: 1px solid var(--gt-surface-200);
    border-radius: var(--fg-border-radius-sm, 4px);
    transition: all 0.12s ease;
    user-select: none;
    /* overflow: hidden; */
  }
}
.product-card:hover {
  border-color: var(--gt-primary);
  box-shadow: 0 1px 3px rgba(1, 103, 171, 0.1);
}
 
.product-card--has-selected {
  border-color: var(--gt-primary);
  box-shadow: 0 0 0 2px rgba(1, 103, 171, 0.15);
}
 
@media (min-width: 767px) {
  .product-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    border: 1px solid var(--gt-surface-400);
  }
 
  .product-card__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fg-slate-900, #0f172a);
    line-height: 1.3;
    flex: 1;
  }
}
 
.product-card__expand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
 
.product-card__selected-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gt-primary);
  background: var(--gt-primary-bg, #e6f2fa);
  border-radius: 999px;
  min-width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
}
 
.product-card__chevron {
  font-size: 0.75rem;
  color: var(--fg-slate-400, #94a3b8);
  transition: transform 0.2s ease;
}
 
.product-card--expanded .product-card__chevron {
  transform: rotate(180deg);
}
 
.product-card__sizes {
  display: none;
  border-top: 1px solid var(--gt-surface-200);
  padding: 0.25rem 0;
  background: var(--gt-white);
}
 
.product-card--expanded .product-card__sizes {
  display: block;
}
 
.product-card__size-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s ease;
}
 
.product-card__size-option:hover {
  background: var(--gt-surface-50, #f8f8f8);
}
 
.product-card__size-label {
  font-size: 0.8125rem;
  color: var(--fg-slate-700, #334155);
}
 
.product-card__size-check {
  font-size: 0.75rem;
  color: var(--gt-primary);
  opacity: 0;
  transition: opacity 0.1s ease;
}
 
.product-card__size-option--selected {
  background: var(--gt-primary-bg, #e6f2fa);
}
 
.product-card__size-option--selected .product-card__size-check {
  opacity: 1;
}
 
/* Cart Panel */
.cart-panel {
  display: block;
  background: var(--gt-white);
  border: 1px solid var(--gt-surface-200);
  border-radius: var(--fg-border-radius-md, 6px);
  overflow: hidden;
  margin-top: 0.5rem;
}
 
.cart-panel--visible {
  display: block;
}
 
.cart-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--gt-surface-50);
  border-bottom: 1px solid var(--gt-surface-200);
}
 
.cart-panel__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg-slate-900, #0f172a);
}
 
.cart-panel__count {
  font-size: 0.875rem;
  color: var(--fg-slate-500, #64748b);
}
 
.cart-panel__body {
  padding: 0.75rem 1rem;
  max-height: 300px;
  overflow-y: auto;
}
 
/* Cart Table */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
 
.cart-table th {
  text-align: left;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-slate-600, #64748b);
  border-bottom: 1px solid var(--gt-surface-200);
  white-space: nowrap;
}
 
.cart-table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--gt-surface-100);
  vertical-align: middle;
}
 
.cart-row__qty {
  width: 80px;
}
 
.cart-row__input {
  width: 60px;
  padding: 0.25rem 0.375rem;
  font-size: 0.875rem;
  border: 1px solid var(--gt-surface-300);
  border-radius: var(--fg-border-radius-sm, 4px);
  text-align: center;
}
 
.cart-row__name {
  font-weight: 500;
  color: var(--fg-slate-900, #0f172a);
}
 
.cart-row__size {
  color: var(--fg-slate-500, #64748b);
  font-size: 0.8125rem;
}
 
.cart-row__actions {
  width: 40px;
  text-align: center;
}
 
.cart-row__empty {
  text-align: center;
  color: var(--fg-slate-500, #64748b);
  padding: 1rem;
  font-style: italic;
}
 
/* Footer */
.product-picker__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--gt-white);
  border-top: 1px solid var(--gt-surface-200);
  border-radius: 0 0 var(--fg-border-radius-md, 6px)
    var(--fg-border-radius-md, 6px);
}
 
.product-picker__footer-right {
  display: flex;
  gap: 0.5rem;
}
 
/* Mobile Responsive */
@media (max-width: 767px) {
  .product-picker__board {
    grid-template-columns: 1fr;
  }
 
  .product-picker__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
 
  .product-picker__actions {
    width: 100%;
    justify-content: space-between;
  }
 
  .product-column__list {
    max-height: 300px;
  }
 
  .cart-table th,
  .cart-table td {
    padding: 0.375rem 0.25rem;
    font-size: 0.8125rem;
  }
 
  .cart-row__qty {
    width: 60px;
  }
 
  .cart-row__input {
    width: 50px;
  }
  /* .product-card {
    background: var(--gt-white);
    border: 1px solid var(--gt-surface-200);
    border-radius: var(--fg-border-radius-sm, 4px);
    transition: all 0.12s ease;
    user-select: none;
    overflow: hidden;
  } */
}
 
/* ========================================
 * GRAPHS SECTION (Images & Graphs Tab)
 * ======================================== */
 
.graphs-section {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--gt-white);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-200);
}
 
.graphs-section__title {
  margin: 0 0 1.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gt-surface-900);
}
 
.graphs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
 
.graph-card {
  padding: 1.5rem;
  background: var(--gt-surface-50);
  border-radius: 12px;
  border: 1px solid var(--gt-surface-100);
}
 
.graph-card__title {
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gt-surface-700);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
 
.graph-card__canvas-wrap {
  height: 300px;
  position: relative;
}
 
/* @media (max-width: 768px) {
  .graphs-grid {
    grid-template-columns: 1fr;
  }
} */
 
textarea.form__input {
  height: 50px;
  padding: 10px;
}