/* Dragon-DMR Server
 * Author: SQ9LM Łukasz <sq9lm@dragon-net.pl> (c) 2019-2026, https://sq9lm.dragon-net.pl
 *
 * Paging controls (assets/js/dn-pager.js); fits both the admin theme
 * (dragon-theme.css) and the public page (strefa.css) through fallbacks.
 */
.dn-pager-off { display: none !important; }

.dn-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    font-size: 0.875rem;
    color: var(--text-secondary, #8b949e);
}
.dn-pager[hidden] { display: none; }
.dn-pager__size select {
    margin-left: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    background: var(--bg-tertiary, #21262d);
    color: var(--text-primary, #f0f6fc);
    font: inherit;
}
.dn-pager__info { font-variant-numeric: tabular-nums; }
.dn-pager__pages { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dn-pager__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    background: var(--bg-tertiary, #21262d);
    color: var(--text-primary, #f0f6fc);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.dn-pager__btn:hover:not(:disabled) { border-color: var(--dn-red-light, #e63946); }
.dn-pager__btn.is-current { background: var(--dn-red-primary, #c72127); border-color: var(--dn-red-primary, #c72127); color: #fff; cursor: default; }
.dn-pager__btn:disabled:not(.is-current) { opacity: 0.4; cursor: default; }
.dn-pager__arrow { font-size: 1.1rem; line-height: 1; }
.dn-pager__gap { padding: 0 4px; }
.dn-pager__btn:focus-visible, .dn-pager__size select:focus-visible { outline: 2px solid var(--text-link, #58a6ff); outline-offset: 2px; }

@media (max-width: 600px) {
    .dn-pager { padding: 10px 12px; }
    .dn-pager__pages { margin-left: 0; width: 100%; flex-wrap: wrap; }
}
