@tailwind components;

@layer components {
  .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-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;
  }

  .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-[#eaf3fb] p-2 text-center text-xl font-medium text-[#647784];
  }

  [data-theme="black"] {
    .card {
      color: #fff;
      background-color: #0a0a0a !important;
    }
    form {
      color: rgb(255 255 255);
    }
    label {
      color: rgb(241, 241, 241);
    }
    input {
      height: 3.2rem;
      background-color: #1a1a1a;
      border: 1px solid #262626;
      border-radius: 4px;
    }
    input.text-gray-600 {
      color: #f1f1f1;
    }
    button[role="combobox"] {
      color: #f1f1f1;
      background-color: rgb(26, 26, 26);
    }
    div [role="tablist"] {
      border: unset;
      gap: 4px;
    }
    .tabs-trigger[data-state="inactive"] {
      color: #a4b7bf;
      background: #55595d;
    }
    .tabs-trigger[data-state="inactive"]:hover {
      color: #6bbaff;
      background: #4c4f52;
    }
    .card-border {
      box-shadow: 0 0 10px -1px #0000000f;
      border: 1px solid #393939;
      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
    }
    a[aria-current="page"] {
      background-color: rgb(32, 148, 250);
      color: #000;
    }
    .card-header {
      @apply border-b-[#3f4042];
    }
    .form-section-title {
      @apply bg-[#5e7b9c] text-[#fff];
    }
    .gis-layer-panel {
      background: #111214;
      border-right-color: #2f3136;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
    }
    .gis-layer-panel-title {
      color: #f3f4f6;
    }
    .gis-layer-panel hr {
      border-color: #2f3136;
    }
    .gis-layer-row {
      color: #e5e7eb;
    }
    .gis-layer-row:hover {
      background: rgba(255, 255, 255, 0.08);
    }
    .gis-layer-row span,
    .gis-layer-row label {
      color: #e5e7eb !important;
    }
    .gis-layer-row input[type="checkbox"] {
      accent-color: #c026d3;
    }
    .gis-layer-action-button {
      background: #1a1c20;
      border-color: #3b82f6;
      color: #cfe3ff;
    }
    .gis-layer-action-button:hover {
      background: #23262b;
    }
    .gis-layer-setting {
      background: #111214;
      border-top: 1px solid #2f3136;
    }
    .gis-layer-toggle {
      background: #111214;
      border-color: #2f3136;
      color: #f3f4f6;
    }
    .gis-layer-toggle:hover {
      background: #1a1c20;
    }
    input[type="file"] {
      background-color: #1a1a1a;
      border-color: #262626;
      color: #f1f1f1;
    }
  }

  [data-theme="blue"] {
    .card-border {
      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
    }
    .card-header {
      @apply border-b-[#3f4042];
    }
    .form-section-title {
      @apply bg-[#eaf3fb] text-[#647784];
    }
  }

  [data-theme="green"] {
    .card-border {
      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
    }
    .card-header {
      @apply border-b-[#3f4042];
    }
    .form-section-title {
      @apply bg-[#ebf7f7] text-[#64908f];
    }
  }

  [data-theme="red"] {
    .card-border {
      @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
    }
    .card-header {
      @apply border-b-[#3f4042];
    }
    .form-section-title {
      @apply bg-[#f6f6f9] text-[#808080];
    }
  }
}
/* `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;
}