/* Bridge layer: adapts existing Flask templates to Claude design shell */

.page > * {
  max-width: 100%;
}

.app,
.sidebar,
.topbar,
.page,
.card,
.btn,
.chip,
.tabs .tab,
input,
select,
textarea {
  transition: all 150ms ease;
}

/* Strict no-go rules from guide */
.card,
.task-card,
.filters-wrap,
.kim-header,
.kim-export-panel,
.kim-sections-block,
.kim-tags-block {
  box-shadow: none !important;
}

.kim-export-panel,
.kim-sections-block,
.kim-tags-block {
  margin-top: 12px;
}

.task-kim-btn.is-added,
.task-pres-btn.is-added {
  background-image: none !important;
}

.nav-item .ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

.topbar .acts .btn.icon {
  width: 32px;
  height: 32px;
}

.topbar .acts .user-menu--topbar-dark .user-menu-trigger {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.topbar .acts .user-menu--topbar-dark .user-menu-icon {
  width: 18px;
  height: 18px;
}

.pres-detail-toolbar-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.page-head .sub {
  max-width: 540px;
}

.page-head .right {
  gap: 10px;
}

.kim-page-head {
  margin-bottom: 16px;
}

h1, .kim-title-row h1 {
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.kim-header-meta,
.meta-line,
.kim-date-line-label,
.kim-created-date-text {
  color: var(--ink-3);
}

/* Buttons */
.kim-detail-back-btn,
.btn-light,
.kim-open-btn,
.kim-remove-btn,
.task-kim-btn,
.task-pres-btn,
.kim-tags-edit-btn,
.kim-edit-toggle,
.kim-record-btn,
.kim-slot-submit,
.kim-save-btn,
.kim-cancel-btn,
.kim-sections-save-btn,
.kim-sections-cancel-btn,
.kim-tags-save-btn,
.kim-tags-cancel-btn {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  font-weight: 500;
}

.kim-detail-back-btn:hover,
.btn-light:hover,
.kim-open-btn:hover,
.kim-remove-btn:hover,
.task-kim-btn:hover,
.task-pres-btn:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink);
  transform: none;
}

.btn-primary,
.new-task-btn,
.kim-export-pdf-btn,
.pres-miro-btn {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
  font-weight: 600;
}

.btn-primary:hover,
.new-task-btn:hover,
.kim-export-pdf-btn:hover,
.pres-miro-btn:hover {
  background: #e6f05f;
  border-color: #e6f05f;
  color: var(--accent-ink);
}

.pres-detail-preview-btn {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}

.pres-detail-preview-btn:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}

/* Inputs/selects */
input[type="text"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea,
.kim-edit-input,
.kim-edit-textarea,
.pres-miro-select {
  border-radius: 8px !important;
  border: 1px solid var(--line-2) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

/* Cards / panels */
.filters-wrap,
.task-card,
.empty-state,
.kim-header,
.kim-sections-block,
.kim-tags-block,
.kim-export-panel,
.kim-answer-keys-wrap,
.pres-versions-panel,
.kim-custom-slot,
.kim-task-card {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

.task-card:hover,
.kim-export-panel:hover {
  box-shadow: none !important;
  transform: none !important;
}

.task-pill {
  border-radius: 4px !important;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: var(--accent) !important;
  padding: 2px 6px !important;
  font-size: 11.5px !important;
}

.tag-badge,
.kim-tag-chip,
.kim-section-chip {
  height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}

/* Top spacing consistency */
.pres-detail-toolbar-row,
.kim-title-row,
.filters-top {
  margin-bottom: 16px;
}

/* Modal system */
.kim-pick-modal {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

/* Better dark readability for old green answer cards */
:root[data-theme="dark"] .task-card-answer {
  background: rgba(93, 190, 123, 0.09) !important;
  border-color: rgba(93, 190, 123, 0.35) !important;
}

:root[data-theme="dark"] .task-card-answer-title,
:root[data-theme="dark"] .task-card-answer-body {
  color: #b5e7c3 !important;
}

/* ===== Библиотека: две колонки только внутри .library-split (не весь .page) ===== */
.library-split {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px 28px;
  align-items: start;
  isolation: isolate;
  width: 100%;
  min-width: 0;
}

.library-split .filters-wrap {
  position: sticky;
  top: var(--library-filters-sticky-top, 80px);
  z-index: 8;
  align-self: start;
  max-height: calc(100vh - var(--library-filters-sticky-top, 80px) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px !important;
  margin: 0 !important;
}

.library-split .tasks-list,
.library-split .pagination {
  grid-column: 2;
  min-width: 0;
}

.library-split .search-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}

.library-split .search-row .btn-primary {
  width: 100%;
  justify-content: center;
}

.page .tabs .tab {
  text-decoration: none;
}

.page .tabs {
  margin-bottom: 4px;
}

.library-split .filters-top {
  margin-bottom: 14px !important;
}

.library-split .filters-top-buttons {
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
}

.library-split .new-task-btn {
  width: 100%;
  text-align: center;
  font-weight: 600;
}

.library-split .filters-wrap .library-nav-row {
  display: none !important;
}

.library-split .filter-group {
  gap: 8px !important;
}

.library-split .chip input + span {
  min-height: 26px !important;
  padding: 0 10px !important;
}

.library-split .task-card {
  margin-bottom: 12px !important;
}

.library-split .task-card-inner {
  padding: 16px !important;
}

.library-split .task-body {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.library-split .task-actions {
  position: relative;
  z-index: 5;
}

.library-split .task-actions .task-kim-btn,
.library-split .task-actions .task-pres-btn {
  min-height: 32px !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
}

/* ===== Pixel pass: KIM detail ===== */
.page:has(.kim-header) .kim-header {
  padding: 20px !important;
  border-radius: var(--radius) !important;
  margin-bottom: 16px !important;
}

.page:has(.kim-header) .kim-title-row {
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.page:has(.kim-header) .kim-title-row-left {
  gap: 10px !important;
}

.page:has(.kim-header) .kim-title-row-right {
  gap: 10px !important;
}

.page:has(.kim-header) .kim-date-line {
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  padding: 8px 10px !important;
}

.page:has(.kim-header) .kim-record-btn {
  border: 1px solid var(--rec) !important;
  color: var(--rec) !important;
  background: transparent !important;
}

.page:has(.kim-header) .kim-record-btn:hover {
  background: rgba(225, 29, 44, 0.08) !important;
}

.page:has(.kim-header) .kim-sections-block,
.page:has(.kim-header) .kim-tags-block,
.page:has(.kim-header) .kim-export-panel {
  border-radius: var(--radius) !important;
  padding: 14px !important;
}

.page:has(.kim-header) .kim-export-summary-text {
  font-family: "MathBlog Lispako", "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 13px;
}

.page:has(.kim-header) .kim-export-body {
  gap: 10px !important;
}

.page:has(.kim-header) .kim-export-pdf-btn {
  width: fit-content;
}

/* Responsive fallback */
@media (max-width: 1180px) {
  .library-split {
    grid-template-columns: 1fr;
  }
  .library-split .filters-wrap,
  .library-split .tasks-list,
  .library-split .pagination {
    grid-column: 1;
  }
  .library-split .filters-wrap {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}