/* rt-stats.css — Stats page + forms */

/* ============================================================
   STATS PAGE — [reading_trolls_stats]
   ============================================================ */

.rt-stats-app {
    max-width: 900px;
    margin:    0 auto;
    padding:   24px 20px;
    font-family: var(--rt-font-body);
}

/* ── Nav ── */
.rt-stats-nav {
    display:       flex;
    flex-direction: column;
    gap:           16px;
    margin-bottom: 28px;
}

.rt-stats-back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--rt-text-muted);
    text-decoration: none;
    font-size:       13px;
    font-weight:     600;
    white-space:     nowrap;
    padding:         5px 12px;
    border:          1px solid var(--rt-border);
    border-radius:   var(--rt-r2);
    background:      var(--rt-card-bg);
    transition:      border-color .15s, color .15s;
    align-self:      flex-start;
}
.rt-stats-back:hover {
    border-color: var(--rt-primary);
    color:        var(--rt-primary);
    text-decoration: none;
}

/* Главни табове — хоризонтален ред, full-width на мобилно */
.rt-stats-tabs {
    display:   flex;
    gap:       6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.rt-stats-tabs::-webkit-scrollbar { display: none; }

.rt-stats-tab {
    flex-shrink:   0;
    padding:       9px 20px;
    border:        1px solid var(--rt-border);
    border-radius: var(--rt-r2);
    background:    var(--rt-card-bg);
    cursor:        pointer;
    font-size:     14px;
    font-weight:   600;
    color:         var(--rt-text-muted);
    font-family:   var(--rt-font-body);
    transition:    all .15s;
    white-space:   nowrap;
}
.rt-stats-tab:hover  { border-color: var(--rt-primary); color: var(--rt-primary); }
.rt-stats-tab.active {
    background:    var(--rt-primary);
    border-color:  var(--rt-primary);
    color:         var(--rt-primary-fg);
}

/* Panel */
.rt-stats-panel { animation: rtFadeIn .2s ease; }

@keyframes rtFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Controls (Година select) ── */
.rt-stats-controls {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 20px;
    flex-wrap:     wrap;
}

.rt-stats-controls label {
    font-size:   14px;
    font-weight: 600;
    color:       var(--rt-text-muted);
    display:     flex;
    align-items: center;
    gap:         8px;
    white-space: nowrap;
}

.rt-stats-controls select {
    box-sizing:    border-box;
    min-height:    40px;
    padding:       9px 32px 9px 12px;
    line-height:   1.4;
    border:        1px solid var(--rt-border);
    border-radius: var(--rt-r2);
    font-size:     14px;
    cursor:        pointer;
    background:    var(--rt-card-bg);
    color:         var(--rt-text);
    font-family:   var(--rt-font-body);
}
.rt-stats-controls select:focus {
    outline:      none;
    border-color: var(--rt-primary);
    box-shadow:   0 0 0 3px var(--rt-primary-soft);
}

/* Section */
.rt-stats-section {
    background:    var(--rt-card-bg);
    border: 1px solid var(--rt-border);
    border-radius: 12px;
    padding:       20px;
    margin-bottom: 20px;
    box-shadow:    0 2px 8px rgba(0,0,0,.06);
}

.rt-stats-section-title {
    margin:      0 0 16px;
    font-size:   16px;
    font-weight: 700;
    color:       var(--rt-text);
    font-family: var(--rt-font-display);
}

.rt-stats-loading {
    text-align: center;
    padding:    40px;
    color:      var(--rt-text-light);
    font-size:  15px;
}

/* Stat cards */
.rt-stat-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
}

.rt-stat-card {
    background:    var(--rt-card-bg);
    border-radius: var(--rt-r2);
    padding:       20px 16px;
    text-align:    center;
    box-shadow:    var(--rt-shadow);
    border: 1px solid var(--rt-border);
    border-top:    3px solid var(--rt-primary);
}

.rt-stat-icon  { font-size: 24px; margin-bottom: 8px; }
.rt-stat-value { font-size: 28px; font-weight: 700; color: var(--rt-text); line-height: 1.1; font-family: var(--rt-font-display); letter-spacing: -0.02em; }
.rt-stat-label { font-size: 12px; color: var(--rt-text-muted); margin-top: 6px; }

button.rt-stat-card--action {
    width:      100%;
    height:     100%;
    margin:     0;
    font:       inherit;
    color:      inherit;
    cursor:     pointer;
    appearance: none;
}

button.rt-stat-card--action:hover,
button.rt-stat-card--action:focus-visible {
    border-color:   var(--rt-primary);
    outline:        2px solid var(--rt-primary);
    outline-offset: 2px;
}

/* Ranked breakdown (authors / publishers) */
.rt-stats-ranked-list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.rt-stats-ranked-item--hidden {
    display: none;
}

.rt-stats-ranked-row {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             12px;
    margin-bottom:   5px;
    font-size:       13px;
}

.rt-stats-ranked-label {
    font-weight: 600;
    color:       var(--rt-text);
    line-height: 1.35;
    min-width:   0;
    word-break:  break-word;
}

button.rt-stats-ranked-label-click {
    padding:         0;
    border:          0;
    background:      none;
    font:            inherit;
    text-align:      left;
    cursor:          pointer;
    transition:      color .15s;
}

button.rt-stats-ranked-label-click:hover,
button.rt-stats-ranked-label-click:focus-visible {
    color: var(--rt-primary);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rt-stats-ranked-count {
    color:       var(--rt-text-muted);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.rt-stats-ranked-bar {
    height:        6px;
    background:    var(--rt-surface2);
    border-radius: 999px;
    overflow:      hidden;
}

.rt-stats-ranked-bar-fill {
    height:        100%;
    background:    var(--rt-primary);
    border-radius: 999px;
}

.rt-stats-ranked-section .rt-stats-ranked-more {
    margin-top: 14px;
}

/* ── Compare ─────────────────────────────────────────────── */

.rt-compare-controls { align-items: center; }

.rt-summary-controls {
    flex-wrap: wrap;
    max-width: 100%;
}

.rt-summary-controls label {
    min-width: 0;
}

.rt-summary-controls select {
    min-width: 0;
    max-width: 100%;
}

.rt-summary-controls .rt-stats-share-open {
    max-width: 100%;
}

.rt-compare-vs {
    font-size:   18px;
    font-weight: 700;
    color:       var(--rt-text-light);
}

/* Metric tabs */
.rt-compare-metric-tabs {
    display:        flex;
    gap:            6px;
    margin-bottom:  20px;
    flex-wrap:      nowrap;
    overflow-x:     auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.rt-compare-metric-tabs::-webkit-scrollbar { display: none; }

.rt-metric-tab {
    flex-shrink:   0;
    padding:       7px 16px;
    border:        1px solid var(--rt-border);
    border-radius: var(--rt-r2);
    background:    #fff;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    color:         #6c757d;
    transition:    all .2s;
    scroll-snap-align: center;
}
.rt-metric-tab { font-family: var(--rt-font-body); }
.rt-metric-tab:hover  { border-color: var(--rt-primary); color: var(--rt-primary); }
.rt-metric-tab.active { background: var(--rt-primary); border-color: var(--rt-primary); color: var(--rt-primary-fg); }

/* Compare summary totals */
.rt-compare-summary {
    display:       flex;
    gap:           20px;
    margin-bottom: 20px;
    flex-wrap:     wrap;
}

.rt-compare-total {
    flex:          1;
    min-width:     120px;
    background:    var(--rt-card-bg);
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-r2);
    padding:       16px;
    text-align:    center;
    box-shadow:    var(--rt-shadow);
    display:       flex;
    flex-direction: column;
    gap:           4px;
}
.rt-compare-a { border-top: 3px solid #3498DB; }
.rt-compare-b { border-top: 3px solid #E74C3C; }

.rt-compare-year      { font-size: 13px; color: var(--rt-text-muted); font-weight: 600; }
.rt-compare-total-val { font-size: 32px; font-weight: 700; color: var(--rt-text); font-family: var(--rt-font-display); letter-spacing: -0.02em; }
.rt-compare-total-label { font-size: 12px; color: var(--rt-text-light); }

/* Legend */
.rt-compare-legend {
    display:    flex;
    gap:        16px;
    font-size:  13px;
    color:      var(--rt-text-muted);
    margin-top: 12px;
    justify-content: center;
}

.rt-legend-dot {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    vertical-align: middle;
}

.rt-compare-derived-note {
    margin:     0 0 16px;
    font-size:  13px;
    color:      var(--rt-text-light);
    text-align: center;
    line-height: 1.45;
}

/* ── Calendar ──────────────────────────────────────────────── */

.rt-calendar-controls {
    justify-content: center;
    gap: 20px;
}

.rt-calendar-nav {
    background:    #fff;
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    padding:       6px 14px;
    cursor:        pointer;
    font-size:     18px;
    transition:    all .2s;
}
.rt-calendar-nav:hover { border-color: var(--rt-primary); color: var(--rt-primary); }

.rt-calendar-title {
    font-size:   18px;
    font-weight: 700;
    color:       var(--rt-text);
    font-family: var(--rt-font-display);
    min-width:   180px;
    text-align:  center;
}

.rt-calendar {
    background:    var(--rt-card-bg);
    border: 1px solid var(--rt-border);
    border-radius: 12px;
    padding:       20px;
    box-shadow:    0 2px 8px rgba(0,0,0,.06);
}

.rt-cal-header {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
    margin-bottom:         8px;
}

.rt-cal-dow {
    text-align:  center;
    font-size:   12px;
    font-weight: 700;
    color:       var(--rt-text-muted);
    padding:     4px 0;
}

.rt-cal-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   4px;
}

.rt-cal-cell {
    min-height:    60px;
    min-width:     0;
    overflow:      hidden;
    border:        1px solid var(--rt-border);
    border-radius: var(--rt-r1);
    padding:       4px;
    font-size:     12px;
    position:      relative;
    background:    var(--rt-surface2);
}

.rt-cal-cell.rt-cal-empty { background: transparent; border-color: transparent; }

.rt-cal-cell.rt-cal-finished { background: var(--rt-success-soft); border-color: color-mix(in oklab, var(--rt-success) 40%, transparent); }
.rt-cal-cell.rt-cal-started  { background: var(--rt-primary-soft); border-color: color-mix(in oklab, var(--rt-primary) 30%, transparent); }
.rt-cal-cell.rt-cal-planned  { background: color-mix(in oklab, var(--rt-primary) 8%, var(--rt-surface2)); border-color: color-mix(in oklab, var(--rt-primary) 20%, transparent); }
.rt-cal-cell.rt-cal-dnf      { background: var(--rt-danger-soft); border-color: color-mix(in oklab, var(--rt-danger) 30%, transparent); }
.rt-cal-cell.rt-cal-cancelled { background: color-mix(in oklab, var(--rt-text-muted) 10%, var(--rt-surface2)); border-color: color-mix(in oklab, var(--rt-text-muted) 25%, transparent); }
.rt-cal-cell.rt-cal-tbr      { background: color-mix(in oklab, var(--rt-warning) 12%, var(--rt-surface2)); border-color: color-mix(in oklab, var(--rt-warning) 30%, transparent); }

.rt-cal-day-num {
    display:     block;
    font-size:   11px;
    font-weight: 700;
    color:       #aaa;
    margin-bottom: 2px;
}

.rt-cal-event {
    font-size:     11px;
    line-height:   1.3;
    margin-top:    2px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.rt-cal-event-title { font-size: 10px; }

/* Reading now */
.rt-cal-reading-now {
    margin-top:  20px;
    border-top:  1px solid var(--rt-border);
    padding-top: 16px;
}

.rt-cal-reading-title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--rt-text);
    font-family:   var(--rt-font-display);
    margin:        0 0 12px;
}

.rt-cal-reading-item {
    display:       flex;
    gap:           10px;
    align-items:   flex-start;
    margin-bottom: 10px;
}

.rt-cal-cover {
    width:        36px;
    height:       52px;
    object-fit:   cover;
    border-radius: 3px;
    flex-shrink:  0;
}

.rt-cal-reading-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    font-size:      13px;
}
.rt-cal-reading-info strong { color: var(--rt-text); }
.rt-cal-reading-info span   { color: var(--rt-text-muted); font-size: 12px; }
.rt-cal-reading-info small  { color: var(--rt-text-light); font-size: 11px; }

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 600px) {
    .rt-stats-app        { padding: 14px 12px; }
    .rt-stats-nav        { gap: 12px; margin-bottom: 20px; }
    .rt-stats-tabs       { gap: 6px; }
    .rt-stats-tab        { padding: 8px 14px; font-size: 13px; }
    .rt-stat-cards       { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rt-stat-card        { padding: 14px 12px; }
    .rt-stat-value       { font-size: 22px; }
    .rt-stats-controls   { gap: 8px; }
    .rt-stats-controls label { font-size: 13px; }
    .rt-compare-controls { flex-wrap: wrap; }
    .rt-summary-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .rt-summary-controls label {
        flex-direction: column;
        align-items: stretch;
        white-space: normal;
        width: 100%;
    }
    .rt-summary-controls select,
    .rt-summary-controls .rt-stats-share-open {
        width: 100%;
        margin-left: 0;
    }
    .rt-compare-metric-tabs {
        scroll-snap-type: x mandatory;
        padding-inline: 12px;
    }
    .rt-cal-cell         { min-height: 44px; }
    .rt-cal-event        { display: none; }
    .rt-cal-cell.rt-cal-finished::after { content: '✓'; font-size: 10px; color: var(--rt-success); }
    .rt-cal-cell.rt-cal-started::after  { content: '○'; font-size: 10px; color: var(--rt-primary); }
    .rt-cal-cell.rt-cal-planned::after  { content: '◌'; font-size: 10px; color: var(--rt-primary); }
    .rt-cal-cell.rt-cal-dnf::after      { content: '×'; font-size: 10px; color: var(--rt-danger); }
    .rt-cal-cell.rt-cal-cancelled::after { content: '⊘'; font-size: 10px; color: var(--rt-text-muted); }
    .rt-cal-cell.rt-cal-tbr::after      { content: '+'; font-size: 10px; color: var(--rt-warning); }
    .rt-compare-summary  { flex-direction: column; }
    .rt-stats-section    { padding: 14px; }
}

/* ============================================================
   ФОРМИ — textarea, readonly ISBN, import инструкции
   ============================================================ */

.rt-form-textarea {
    width:       100%;
    padding:     8px 12px;
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    font-size:   14px;
    resize:      vertical;
    box-sizing:  border-box;
    font-family: inherit;
}
.rt-form-textarea:focus {
    outline:      none;
    border-color: var(--rt-primary);
    box-shadow:   0 0 0 3px var(--rt-primary-soft);
}

.rt-isbn-readonly {
    background:   #f5f5f5;
    color:        #888;
    cursor:       default;
    border-color: #e0e0e0;
}

/* Import инструкции блокове */
.rt-import-instructions {
    padding:       20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--rt-border);
}
.rt-import-sg { background: var(--rt-surface2); }
.rt-import-gr { background: var(--rt-surface2); }

.rt-import-instructions h4 { margin-top: 0; font-size: 18px; color: var(--rt-text); }
.rt-import-instructions ol { margin: 10px 0; padding-left: 25px; line-height: 1.8; color: var(--rt-text); }
.rt-import-instructions a  { color: var(--rt-primary); text-decoration: underline; }

/* ============================================================
   JS STATE MESSAGES
   ============================================================ */

.rt-msg-success { color: var(--rt-success); }
.rt-msg-error   { color: #e74c3c; }

.rt-col-error-item {
    text-align:  center;
    padding:     20px;
    color:       #e74c3c;
    list-style:  none;
}

/* Search goto бутон */
.rt-search-goto-btn {
    display:       block;
    margin-top:    6px;
    width:         100%;
    padding:       5px 10px;
    background:    var(--rt-primary);
    color:         var(--rt-primary-fg);
    border:        none;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     12px;
}
.rt-search-goto-btn:hover { opacity: 0.9; }

/* ============================================================
   DUPLICATE PREVIEW & SEARCH STATES
   ============================================================ */

.rt-dedup-preview {
    max-height:    320px;
    overflow-y:    auto;
    margin:        15px 0;
    border: 1px solid var(--rt-border);
    border-radius: 8px;
}
.rt-dedup-item   { padding: 12px; border-bottom: 1px solid var(--rt-border); }
.rt-dedup-keep   { color: var(--rt-success); font-size: 13px; margin-bottom: 4px; }
.rt-dedup-delete { color: #E74C3C; font-size: 13px; }
.rt-dedup-summary { color: var(--rt-text-muted); margin-bottom: 8px; }

.rt-search-state {
    text-align: center;
    padding:    40px;
}
.rt-search-unavailable { color: var(--rt-text-light); }

/* ─────────────────────────────────────────────────────────────
   Пояснения под заглавията на секциите (аудио включено/не)
   ───────────────────────────────────────────────────────────── */
.rt-stats-section-note {
    font-size: 12px;
    color: var(--rt-text-light);
    margin: -6px 0 12px;
}

/* Обем на прочетените книги — ограничаваме питата на десктоп
   (responsive Chart.js изпълва цялата секция и става огромна) */
@media (min-width: 769px) {
    .rt-chart-doughnut-wrap {
        max-width: 380px;
        margin: 0 auto;
    }
}