/* PDKS paneli — sirket paneliyle ayni gorsel dili tasir. */
:host { display: block; }

.panel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 3rem;
}

.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
  .sub { margin: 0; color: #6b7280; font-size: .9rem; }
}

.banner {
  padding: .6rem .8rem;
  border-radius: 8px;
  margin: 0 0 .75rem;
  font-size: .9rem;
  &.bad { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
  &.ok  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
  button {
    background: none; border: none; padding: .5rem .8rem;
    font: inherit; color: #6b7280; cursor: pointer;
    border-bottom: 2px solid transparent;
    &:hover { color: #111827; }
    &.on { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
  }
}

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: .75rem;
  h3 { margin: 0; font-size: 1rem; flex: 1; }
  input, select { font: inherit; padding: .35rem .5rem; border: 1px solid #d1d5db; border-radius: 6px; }
  input[type='search'] { min-width: 12rem; }
  button { font: inherit; padding: .4rem .8rem; border-radius: 6px; border: 1px solid #2563eb; background: #2563eb; color: #fff; cursor: pointer; }
  button.ghost { background: #fff; color: #374151; border-color: #d1d5db; }
  button:disabled { opacity: .6; cursor: not-allowed; }
}

.form {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .75rem; margin-bottom: .75rem;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  input, select { font: inherit; padding: .35rem .5rem; border: 1px solid #d1d5db; border-radius: 6px; }
  button { font: inherit; padding: .4rem .8rem; border-radius: 6px; border: 1px solid #2563eb; background: #2563eb; color: #fff; cursor: pointer; }
  button.ghost { background: #fff; color: #374151; border-color: #d1d5db; }
  .check { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
}

.stats {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem;
  .stat {
    flex: 1; min-width: 7rem; padding: .6rem .75rem;
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    b { display: block; font-size: 1.15rem; }
    span { font-size: .78rem; color: #6b7280; }
    &.ok   { background: #f0fdf4; border-color: #bbf7d0; }
    &.bad  { background: #fef2f2; border-color: #fecaca; }
    &.info { background: #eff6ff; border-color: #bfdbfe; }
    &.warn { background: #fffbeb; border-color: #fde68a; }
  }
}

.punch {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .75rem; margin-bottom: .35rem;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
  select, input { font: inherit; padding: .35rem .5rem; border: 1px solid #d1d5db; border-radius: 6px; }
  button { font: inherit; padding: .4rem .9rem; border-radius: 6px; border: 1px solid #0369a1; background: #0369a1; color: #fff; cursor: pointer; }
  button:disabled { opacity: .6; cursor: not-allowed; }
}

.hint { margin: 0 0 .75rem; font-size: .82rem; color: #6b7280; }

table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  th, td { padding: .45rem .5rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
  th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; background: #f9fafb; }
  td.empty { text-align: center; color: #9ca3af; padding: 1.25rem; }
  td.actions { display: flex; gap: .5rem; }
  &.events { margin-top: .5rem; }
}

.pill {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .78rem; background: #f3f4f6; color: #374151;
  &.ok   { background: #dcfce7; color: #166534; }
  &.bad  { background: #fee2e2; color: #991b1b; }
  &.info { background: #dbeafe; color: #1e40af; }
  &.warn { background: #fef3c7; color: #92400e; }
}

.link {
  background: none; border: none; padding: 0; font: inherit;
  color: #2563eb; cursor: pointer; text-decoration: underline;
  &.danger { color: #dc2626; }
}

.detail {
  margin-top: 1rem; padding: .9rem;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
  h3 { margin: 0 0 .35rem; font-size: 1rem; }
  button.ghost { margin-top: .6rem; font: inherit; padding: .35rem .75rem; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
}

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(17, 24, 39, .45);
  .modal {
    width: min(28rem, 92vw); padding: 1.25rem;
    background: #fff; border-radius: 10px;
    h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
    .row { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
    button { font: inherit; padding: .4rem .9rem; border-radius: 6px; cursor: pointer; }
    button.ghost { background: #fff; border: 1px solid #d1d5db; color: #374151; }
    button.danger { background: #dc2626; border: 1px solid #dc2626; color: #fff; }
  }
}