/* PTIT v0.8.0 - Material 3 inspired tokens (dark) */
.ptit {
  /* Color tokens */
  --md-sys-color-background: #000000;
  --md-sys-color-surface: #0b0f14;
  --md-sys-color-surface-1: #0f1520;
  --md-sys-color-surface-2: #121a27;
  --md-sys-color-outline: rgba(255,255,255,.14);
  --md-sys-color-outline-variant: rgba(255,255,255,.08);
  --md-sys-color-on-surface: rgba(255,255,255,.92);
  --md-sys-color-on-surface-variant: rgba(255,255,255,.72);
  --md-sys-color-primary: #7dd3fc; /* cyan-ish */
  --md-sys-color-on-primary: #00131a;
  --md-sys-color-secondary: #a7f3d0;
  --md-sys-color-error: #fb7185;

  --md-radius-sm: 10px;
  --md-radius-md: 16px;
  --md-radius-lg: 22px;

  --md-elev-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.25);
  --md-elev-2: 0 6px 18px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.25);

  --md-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --md-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  color: var(--md-sys-color-on-surface);
  font-family: var(--md-font);
}

.ptit * { box-sizing: border-box; }

.ptit a { color: var(--md-sys-color-primary); text-decoration: none; }
.ptit a:hover { text-decoration: underline; }

.ptit-muted { color: var(--md-sys-color-on-surface-variant); font-size: 13px; }

/* Topbar / tabs */
.ptit-topbar {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elev-1);
}

.ptit-tabs { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ptit-tab {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  background: rgba(255,255,255,.03);
  font-size: 13px;
}
.ptit-tab.is-active {
  border-color: rgba(125,211,252,.55);
  box-shadow: 0 0 0 3px rgba(125,211,252,.10);
  background: rgba(125,211,252,.10);
}

.ptit-actions { display:flex; align-items:center; gap:10px; }

/* Stats bar */
.ptit-stats {
  display:grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
@media (max-width: 1100px) { .ptit-stats { grid-template-columns: repeat(3, minmax(120px, 1fr)); } }
@media (max-width: 560px) { .ptit-stats { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }

.ptit-stat {
  border: 1px solid var(--md-sys-color-outline-variant);
  background: rgba(255,255,255,.02);
  border-radius: var(--md-radius-md);
  padding: 12px 12px 10px;
  box-shadow: var(--md-elev-1);
}
.ptit-stat__label { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.ptit-stat__value { font-size: 22px; font-weight: 700; margin-top: 6px; letter-spacing: .2px; }

/* Sections */
.ptit-section { margin: 14px 0; }
.ptit-section--kanban { }
.ptit-section--editor { }

/* Kanban */
.ptit-kanban {
  display:grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) { .ptit-kanban { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
@media (max-width: 600px) { .ptit-kanban { grid-template-columns: repeat(1, minmax(240px, 1fr)); } }

.ptit-col {
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: rgba(255,255,255,.02);
  box-shadow: var(--md-elev-1);
  overflow: hidden;
  min-height: 220px;
}

.ptit-col__head {
  padding: 12px 12px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.ptit-col__title { font-weight: 700; letter-spacing: .2px; }
.ptit-col__count { font-family: var(--md-mono); font-size: 12px; opacity: .8; }

.ptit-col__body {
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.ptit-col.is-drop-hover { outline: 2px dashed rgba(125,211,252,.55); outline-offset: -6px; }

/* Cards */
.ptit-card {
  border-radius: 18px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--md-elev-1);
  padding: 12px;
}

.ptit-card[draggable="true"] { cursor: grab; }
.ptit-card.is-dragging { opacity: .65; }
.ptit-card__top { display:flex; gap:10px; }
.ptit-thumb { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; border: 1px solid var(--md-sys-color-outline); }
.ptit-card__titlewrap { flex:1; min-width:0; }
.ptit-card__title { display:block; font-weight: 750; color: var(--md-sys-color-on-surface); font-size: 14px; line-height: 1.2; }
.ptit-card__meta { display:flex; gap:6px; flex-wrap:wrap; margin-top: 8px; align-items:center; }
.ptit-card__bottom { display:flex; justify-content:space-between; align-items:center; margin-top: 10px; }
.ptit-small { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }

/* Chips / badges */
.ptit-badge {
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: rgba(255,255,255,.03);
  color: var(--md-sys-color-on-surface);
}
.ptit-chip {
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(125,211,252,.35);
  background: rgba(125,211,252,.10);
  color: var(--md-sys-color-on-surface);
}
.ptit-chip--env { text-decoration: none; }
.ptit-chip--env:hover { text-decoration: none; filter: brightness(1.05); }

/* Badge variants */
.ptit-badge--type-bug { border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.08); }
.ptit-badge--type-change { border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.08); }
.ptit-badge--type-task { border-color: rgba(167,243,208,.45); background: rgba(167,243,208,.08); }

.ptit-badge--priority-low { border-color: rgba(255,255,255,.18); }
.ptit-badge--priority-medium { border-color: rgba(125,211,252,.35); }
.ptit-badge--priority-high { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); }
.ptit-badge--priority-urgent { border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.10); }

/* Buttons */
.ptit-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--md-sys-color-outline-variant);
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.ptit-btn--filled {
  border-color: rgba(125,211,252,.50);
  background: rgba(125,211,252,.92);
  color: var(--md-sys-color-on-primary);
}
.ptit-btn--filled:hover { filter: brightness(1.03); }
.ptit-btn--tonal {
  background: rgba(255,255,255,.04);
  color: var(--md-sys-color-on-surface);
}
.ptit-btn--tonal:hover { background: rgba(255,255,255,.06); }

.ptit-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: rgba(255,255,255,.03);
  color: var(--md-sys-color-on-surface);
  cursor:pointer;
}
.ptit-iconbtn:hover { background: rgba(255,255,255,.06); }

/* Editor */
.ptit-editor { padding: 0; overflow:hidden; }
.ptit-editor__head {
  padding: 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: rgba(255,255,255,.03);
}
.ptit-editor__title { font-weight: 800; letter-spacing: .2px; }
.ptit-form { padding: 14px; }
.ptit-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .ptit-grid { grid-template-columns: repeat(1, minmax(0,1fr)); } }

.ptit-field label { display:block; font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 6px; }
.ptit-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: rgba(0,0,0,.25);
  color: var(--md-sys-color-on-surface);
  outline: none;
}
.ptit-input:focus {
  border-color: rgba(125,211,252,.55);
  box-shadow: 0 0 0 4px rgba(125,211,252,.12);
}
.ptit-field--full { grid-column: 1 / -1; }

.ptit-form__actions { display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

/* Modal */
.ptit-modal { position: fixed; inset: 0; z-index: 99999; display:none; }
.ptit-modal.is-open { display:block; }
.ptit-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.65); }
.ptit-modal__panel {
  position: relative;
  width: min(980px, calc(100% - 24px));
  margin: 40px auto;
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  box-shadow: var(--md-elev-2);
  overflow: hidden;
}
@media (max-width: 720px) { .ptit-modal__panel { margin: 16px auto; } }

.ptit-modal__head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.ptit-modal__title { font-weight: 850; }
.ptit-modal__body { padding: 14px; max-height: min(78vh, 760px); overflow:auto; }
.ptit-divider { height:1px; background: var(--md-sys-color-outline-variant); margin: 14px 0; }

.ptit-comments .ptit-comment {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-radius-md);
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.02);
}
.ptit-comment__meta { display:flex; justify-content:space-between; gap:10px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; margin-bottom: 8px; }
.ptit-commentform { display:flex; flex-direction:column; gap:10px; }

.ptit-upload__row { display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.ptit-upload__label { font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.ptit-upload__hint { margin-top: 8px; }

.ptit-activity .ptit-activity__item {
  border-left: 2px solid rgba(125,211,252,.35);
  padding-left: 10px;
  margin: 10px 0;
}
.ptit-activity__meta { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }

/* Admin widget */
.ptit-adminwidget { font-family: var(--md-font); }


/* v0.8.1 readability fixes (dark on dark) */
.ptit input, .ptit textarea, .ptit select {
  color: var(--md-sys-color-on-surface);
}
.ptit input::placeholder,
.ptit textarea::placeholder {
  color: rgba(255,255,255,.55);
}
.ptit textarea { color: var(--md-sys-color-on-surface) !important; }

/* Slightly brighter field surfaces for contrast */
.ptit-input {
  background: rgba(255,255,255,.04);
}
.ptit-input:focus {
  background: rgba(255,255,255,.06);
}

/* Hover + motion polish */
.ptit-card:hover { border-color: rgba(255,255,255,.18); }
.ptit-card__title:hover { text-decoration: none; opacity: .95; }
.ptit-btn, .ptit-iconbtn, .ptit-tab, .ptit-card { transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.ptit-card[draggable="true"]:hover { transform: translateY(-1px); box-shadow: var(--md-elev-2); }
.ptit-btn:hover { transform: translateY(-1px); }

/* Single issue page */
.ptit-single__nav { margin: 8px 0 12px; }
.ptit-single__card { padding: 0; overflow:hidden; }
.ptit-single__head { padding: 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.ptit-single__title { font-weight: 850; letter-spacing: .2px; }

.ptit-attachgrid { display:flex; flex-wrap:wrap; gap:10px; }
.ptit-attach img { width: 96px; height: 96px; object-fit: cover; border-radius: 18px; border: 1px solid var(--md-sys-color-outline); }

/* Improve contrast between sections */
.ptit-section--kanban { padding: 12px; border-radius: var(--md-radius-lg); border: 1px solid var(--md-sys-color-outline-variant); background: rgba(255,255,255,.02); }
.ptit-section--editor { padding: 12px; border-radius: var(--md-radius-lg); border: 1px solid var(--md-sys-color-outline-variant); background: rgba(255,255,255,.015); }
.ptit-section--single { padding: 12px; border-radius: var(--md-radius-lg); border: 1px solid var(--md-sys-color-outline-variant); background: rgba(255,255,255,.015); }