@tailwind components;

@layer components {
  /*
   * 가로 넘침은 잘라내되 스크롤 컨테이너를 만들지 않아 공통 sticky 헤더를 유지한다.
   * 실제 다열 표의 가로 이동은 StandardDataTable 내부 스크롤 영역이 담당한다.
   */
  .sn-base-layout {
    overflow-x: clip !important;
  }

  /*
   * 다열 표의 최소 폭이 공통 BaseLayout의 flex 항목을 넓히지 않도록 한다.
   * 화면 전체가 아닌 표 내부에서만 가로 스크롤되며 SN의 모든 일반 페이지에 적용된다.
   */
  .sn-base-layout [class~="group/sidebar-wrapper"] {
    min-width: 0;
    max-width: 100%;
  }

  .sn-base-layout .flex-1 {
    min-width: 0;
  }

  .card {
    @apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-label;
  }
  .card-border {
    @apply border border-border bg-background shadow-blur;
  }
  .card-header {
    @apply -mx-[0.6rem] flex items-center justify-between border-b border-b-border p-4;
  }
  .card-footer {
    @apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-border py-4;
  }

  input[type="file"] {
    @apply h-[40px] w-[200px] cursor-pointer rounded-md border border-input bg-field px-3 py-2 text-sm text-foreground;
  }

  /*
   * SN의 일반 콤보박스는 블랙모드에서 공통 form 색상으로 통일한다.
   * 비활성 콤보만 field 색상을 사용해 입력 가능 여부를 시각적으로 구분한다.
   */
  [data-theme="black"]
    :where(.selectbox_trigger, button[role="combobox"], select) {
    background-color: var(--form) !important;
    color: var(--foreground) !important;
    color-scheme: dark;
  }

  [data-theme="black"]
    :where(
      button[role="combobox"]:disabled,
      button[role="combobox"][aria-disabled="true"],
      button[role="combobox"][data-disabled],
      select:disabled
    ) {
    background-color: var(--field) !important;
    color: var(--muted-foreground) !important;
  }

  [data-theme="black"] select option {
    background-color: var(--popover);
    color: var(--popover-foreground);
  }

  /* 입력 가능한 텍스트 계열 필드도 콤보와 동일한 form 색상을 사용한다. */
  [data-theme="black"]
    :where(
      input:not([type]),
      input[type="text"],
      input[type="search"],
      input[type="email"],
      input[type="tel"],
      input[type="url"],
      input[type="password"],
      input[type="number"],
      input[type="date"],
      input[type="datetime-local"],
      input[type="month"],
      input[type="week"],
      input[type="time"],
      textarea
    ) {
    background-color: var(--form) !important;
    color: var(--foreground) !important;
    color-scheme: dark;
  }

  [data-theme="black"]
    :where(
      input:disabled,
      input[readonly],
      textarea:disabled,
      textarea[readonly]
    ) {
    background-color: var(--field) !important;
    color: var(--muted-foreground) !important;
  }

  .sn-popup-page {
    @apply flex h-screen min-w-0 flex-col overflow-hidden bg-background text-foreground;
  }

  .sn-popup-modal-page {
    @apply flex h-screen items-start justify-center bg-container px-3 py-3 text-foreground;
  }

  .sn-popup-shell {
    @apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
  }

  .sn-popup-modal-shell {
    @apply w-full overflow-hidden rounded-[12px] border border-border bg-background;
  }

  .sn-popup-header {
    @apply flex min-h-[44px] items-center justify-between border-b border-border bg-primary px-5 py-3;
  }

  .sn-popup-modal-header {
    @apply flex h-[44px] items-center border-b border-border bg-secondary px-[18px];
  }

  .sn-popup-title {
    @apply text-[1.45rem] font-semibold text-primary-foreground;
  }

  .sn-popup-modal-title {
    @apply text-[1.35rem] font-semibold tracking-[-0.01em] text-foreground;
  }

  .sn-popup-header-link {
    @apply mr-3 text-[1.05rem] font-medium text-primary-foreground hover:text-primary-foreground;
    opacity: 0.9;
  }

  .sn-popup-header-button {
    @apply border px-3 py-1 text-[1.05rem] text-primary-foreground;
    border-color: color-mix(
      in srgb,
      var(--primary-foreground) 30%,
      transparent
    );
  }

  .sn-popup-section {
    @apply flex min-h-0 flex-1 flex-col overflow-hidden p-4;
  }

  /* 부모 업무화면의 10px rem 기준과 동일한 가독성을 준설 등록 팝업에도 적용한다. */
  .sn-dredging-register {
    font-size: 1.3rem;
    line-height: 1.5;
  }

  .sn-dredging-register .text-xs {
    font-size: 1.1rem;
  }

  .sn-dredging-register .text-sm,
  .sn-dredging-register button,
  .sn-dredging-register input {
    font-size: 1.3rem;
  }

  .sn-dredging-register .text-base {
    font-size: 1.4rem;
  }

  .sn-dredging-register .text-xl {
    font-size: 1.8rem;
  }

  /* 준설 팝업 날짜 입력은 부모 준설목록의 날짜 입력 글자 크기와 동일하게 유지한다. */
  .sn-dredging-register .input-date-picker {
    font-size: 1.25rem !important;
  }

  /* 준설사진 파일명은 메타정보 표에서만 표시하고 공통 업로드 목록의 중복 표출을 숨긴다. */
  .sn-dredging-photo-upload [aria-description="content file holder"] {
    display: none;
  }

  /* 등록 팝업의 첨부영역을 한 줄 높이로 압축해 하단 지도 가용 높이를 확보한다. */
  .sn-dredging-photo-upload .fileup_root {
    @apply rounded-none bg-transparent p-0;
  }

  .sn-dredging-photo-upload .fileup_panel {
    @apply min-h-10 flex-row gap-1 py-1;
  }

  .sn-dredging-photo-upload .fileup_hint {
    @apply mb-0;
  }

  .sn-dredging-photo-upload .fileup_meta {
    @apply ml-1;
  }

  .sn-popup-filter-panel {
    @apply grid grid-cols-1 gap-3 border-b border-border bg-secondary pb-4;
  }

  .sn-popup-filter-panel-compact {
    @apply border-b border-border bg-secondary pb-3;
  }

  .sn-popup-field {
    @apply block min-w-0;
  }

  .sn-popup-field-label {
    @apply mb-1 text-[1.05rem] font-medium text-label;
  }

  .sn-popup-input {
    @apply h-10 w-full rounded-md border border-input bg-field px-3 text-[1.05rem] text-foreground outline-none placeholder:text-placeholder focus:ring-2 focus:ring-ring;
  }

  .sn-popup-input-sm {
    @apply h-[32px] rounded-[6px] border border-input bg-field px-[10px] text-[1.02rem] font-medium text-foreground outline-none transition placeholder:text-placeholder focus:ring-2 focus:ring-ring;
  }

  .sn-popup-actions {
    @apply flex flex-wrap items-end justify-end gap-2;
  }

  .sn-popup-primary-button {
    @apply h-10 px-5 !text-[1.05rem];
  }

  .sn-popup-secondary-button {
    @apply h-10 rounded-md border border-input bg-background px-5 text-[1.05rem] text-foreground hover:bg-accent;
  }

  .sn-popup-secondary-button-sm {
    @apply h-9 rounded-md border border-input bg-background px-4 text-[1.05rem] text-foreground hover:bg-accent;
  }

  .sn-popup-danger-button-sm {
    @apply h-9 rounded-md border border-destructive bg-background px-4 text-[1.05rem] text-destructive;
  }

  .sn-popup-danger-button-sm:hover {
    background-color: color-mix(
      in srgb,
      var(--destructive) 10%,
      var(--background)
    );
  }

  .sn-popup-primary-button-sm {
    @apply h-[32px] min-w-[56px] rounded-sm bg-primary px-0 py-2 text-sm font-medium text-primary-foreground hover:opacity-90;
  }

  .sn-popup-status-bar {
    @apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-label;
  }

  .sn-popup-success-bar {
    @apply border-b border-border bg-secondary px-5 py-2 text-[1rem] text-foreground;
  }

  .sn-popup-card {
    @apply overflow-hidden rounded-[10px] border border-border bg-background;
  }

  .sn-popup-panel-title {
    @apply text-[1.05rem] font-medium tracking-[-0.01em] text-label;
  }

  .sn-popup-grid-table {
    @apply w-full border-collapse text-[1.05rem];
  }

  .sn-popup-grid-head-row {
    @apply bg-secondary text-title;
  }

  .sn-popup-grid-head-row-strong {
    @apply bg-muted text-foreground;
  }

  .sn-popup-grid-head-cell {
    @apply border border-border px-2 py-2;
  }

  .sn-popup-grid-head-cell-sub {
    @apply border border-border px-2 py-1;
  }

  .sn-popup-grid-cell {
    @apply border border-border px-2 py-2 text-foreground;
  }

  .sn-popup-grid-row {
    @apply bg-background;
  }

  .sn-popup-grid-row-hover {
  }

  .sn-popup-grid-row-hover:hover {
    background-color: color-mix(
      in srgb,
      var(--secondary) 60%,
      var(--background)
    );
  }

  .sn-popup-grid-row-selected {
    @apply bg-primary-transparent;
  }

  .sn-popup-empty-cell {
    @apply text-label;
  }

  .sn-popup-badge {
    @apply inline-flex items-center justify-center px-2 py-1 text-[12px] font-semibold;
  }

  .sn-popup-badge-danger {
    @apply bg-destructive text-destructive-foreground;
  }

  .sn-popup-badge-normal {
    @apply border border-border bg-background text-foreground;
  }

  .sn-popup-help-text {
    @apply mt-2 rounded-md border border-border bg-secondary px-4 py-3 text-[1.05rem] text-label;
  }

  .form-section-title {
    @apply mt-4 border border-border bg-secondary p-2 text-center text-xl font-medium text-label;
  }

  [data-theme="black"] {
    .card {
      color: var(--card-foreground);
      background-color: var(--card) !important;
    }
    form {
      color: var(--foreground);
    }
    label {
      color: var(--label);
    }
    input {
      height: 3.2rem;
      background-color: var(--field);
      border: 1px solid var(--input);
      border-radius: 4px;
    }
    input.text-label {
      color: var(--label);
    }
    div [role="tablist"] {
      border: unset;
      gap: 4px;
    }
    .tabs-trigger[data-state="inactive"] {
      color: var(--muted-foreground);
      background: var(--muted);
    }
    .tabs-trigger[data-state="inactive"]:hover {
      color: var(--accent-foreground);
      background: var(--accent);
    }
    .card-border {
      @apply border-border bg-card shadow-blur;
    }
    a[aria-current="page"] {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }
    .card-header {
      @apply border-b-border;
    }
    .form-section-title {
      @apply bg-secondary text-label;
    }
    .gis-layer-panel {
      background: var(--background);
      border-right-color: var(--border);
      box-shadow: 0 0 0 1px var(--border);
    }
    .gis-layer-panel-title {
      color: var(--foreground);
    }
    .gis-layer-panel hr {
      border-color: var(--border);
    }
    .gis-layer-row {
      color: var(--foreground);
    }
    .gis-layer-row:hover {
      background: var(--accent);
    }
    .gis-layer-row span,
    .gis-layer-row label {
      color: var(--foreground) !important;
    }
    .gis-layer-row input[type="checkbox"] {
      accent-color: var(--primary);
    }
    .gis-layer-action-button {
      background: var(--background);
      border-color: var(--primary);
      color: var(--primary);
    }
    .gis-layer-action-button:hover {
      background: var(--accent);
    }
    .gis-layer-setting {
      background: var(--background);
      border-top: 1px solid var(--border);
    }
    .gis-layer-toggle {
      background: var(--background);
      border-color: var(--border);
      color: var(--foreground);
    }
    .gis-layer-toggle:hover {
      background: var(--accent);
    }
    input[type="file"] {
      background-color: var(--field);
      border-color: var(--input);
      color: var(--foreground);
    }
  }

  [data-theme="blue"] {
    .card-border {
      @apply border-border bg-card;
    }
    .card-header {
      @apply border-b-border;
    }
    .form-section-title {
      @apply bg-secondary text-label;
    }
  }

  [data-theme="green"] {
    .card-border {
      @apply border-border bg-card;
    }
    .card-header {
      @apply border-b-border;
    }
    .form-section-title {
      @apply bg-secondary text-label;
    }
  }

  [data-theme="red"] {
    .card-border {
      @apply border-border bg-card;
    }
    .card-header {
      @apply border-b-border;
    }
    .form-section-title {
      @apply bg-secondary text-label;
    }
  }
}
/* `I/I 분석 > 침입수 분석결과`는 나중에 다시 사용할 수 있도록 라우트는 유지하고 LNB에서만 임시 숨김 처리한다. */
/* `I/I 분석 > 침입수 분석결과`, `RDII 분석결과`는 지도 popup 흐름으로 대체하고 레거시 라우트는 유지한 채 LNB에서만 숨긴다. */
[data-sidebar="menu"]
  > *:nth-child(2)
  [data-sidebar="menu-sub"]
  > li:nth-child(2) {
  display: none;
}
[data-sidebar="menu"]
  > *:nth-child(2)
  [data-sidebar="menu-sub"]
  > li:nth-child(4) {
  display: none;
}