/* ================================================================
   doltnit panel v2 - custom styles
   Bazuje na Tabler.io (Bootstrap 5)
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Variables / Theme
   ---------------------------------------------------------------- */
:root {
    --dp-sidebar-width: 250px;
    --dp-transition: 0.2s ease;
    --dp-radius: 6px;
    --dp-shadow: 0 1px 4px rgba(0,0,0,.15);
    --dp-badge-pending: #f59f00;
}

/* ----------------------------------------------------------------
   Sidebar tweaks
   ---------------------------------------------------------------- */
.navbar-vertical {
    width: var(--dp-sidebar-width);
}

.navbar-vertical .nav-link {
    border-radius: var(--dp-radius);
    margin: 1px 8px;
    padding: 0.5rem 0.75rem;
    transition: background var(--dp-transition), color var(--dp-transition);
    font-size: .875rem;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active {
    background: rgba(var(--tblr-primary-rgb), .12);
    color: var(--tblr-primary) !important;
}

.navbar-vertical .nav-link-icon {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.5rem;
    font-size: 1rem;
}

.navbar-vertical .nav-item-header {
    padding: 0.75rem 1rem 0.25rem;
}

/* ----------------------------------------------------------------
   Page header
   ---------------------------------------------------------------- */
.page-header {
    padding: 1rem 0 0.5rem;
    border-bottom: 1px solid var(--tblr-border-color);
    margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */
.card {
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow);
    border: 1px solid var(--tblr-border-color);
}

.card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
    font-weight: 600;
}

.card-stats {
    text-align: center;
    padding: 1.25rem;
}

.card-stats .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.card-stats .stat-label {
    font-size: .8rem;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ----------------------------------------------------------------
   Playlist type badges
   ---------------------------------------------------------------- */
.badge-xtream  { background-color: #206bc4; color: #fff; }
.badge-m3u     { background-color: #2fb344; color: #fff; }
.badge-stalker { background-color: #ae3ec9; color: #fff; }

.playlist-type-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.playlist-type-icon.xtream  { background: rgba(32,107,196,.15); color: #206bc4; }
.playlist-type-icon.m3u     { background: rgba(47,179,68,.15);  color: #2fb344; }
.playlist-type-icon.stalker { background: rgba(174,62,201,.15); color: #ae3ec9; }

/* ----------------------------------------------------------------
   Device status
   ---------------------------------------------------------------- */
.device-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.device-status-dot.active  { background: #2fb344; box-shadow: 0 0 0 3px rgba(47,179,68,.2); }
.device-status-dot.blocked { background: #d63939; box-shadow: 0 0 0 3px rgba(214,57,57,.2); }
.device-status-dot.pending { background: #f59f00; box-shadow: 0 0 0 3px rgba(245,159,0,.2); }

/* ----------------------------------------------------------------
   Sortable playlist list (drag & drop)
   ---------------------------------------------------------------- */
.sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--dp-radius);
    margin-bottom: 4px;
    cursor: default;
    transition: box-shadow var(--dp-transition), background var(--dp-transition);
    gap: 0.75rem;
}

.sortable-item:hover {
    background: var(--tblr-bg-surface-secondary);
}

.sortable-item.sortable-ghost {
    opacity: .4;
}

.sortable-item.sortable-chosen {
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    background: var(--tblr-bg-surface-secondary);
}

.drag-handle {
    cursor: grab;
    color: var(--tblr-muted);
    font-size: 1.2rem;
    flex-shrink: 0;
    padding: 0 4px;
    display: flex;
    align-items: center;
    opacity: .5;
    transition: opacity .15s;
}

.drag-handle:hover { opacity: 1; }
.drag-handle:active { cursor: grabbing; }

.sortable-item .playlist-info {
    flex: 1;
    min-width: 0;
}

.sortable-item .playlist-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sortable-item .playlist-meta {
    font-size: .78rem;
    opacity: .6;
}

/* ----------------------------------------------------------------
   Custom name inline edit
   ---------------------------------------------------------------- */
.custom-name-display {
    cursor: pointer;
    border-bottom: 1px dashed var(--tblr-muted);
    display: inline;
    font-style: italic;
    opacity: .75;
}

.custom-name-display:hover {
    opacity: 1;
    border-bottom-color: var(--tblr-primary);
    color: var(--tblr-primary);
}

/* ----------------------------------------------------------------
   Pending devices banner
   ---------------------------------------------------------------- */
.pending-devices-alert {
    border-left: 4px solid var(--dp-badge-pending);
    background: rgba(245,159,0,.08);
}

/* ----------------------------------------------------------------
   Form tabs (playlist type selector)
   ---------------------------------------------------------------- */
.playlist-type-tabs .nav-link {
    border-radius: var(--dp-radius);
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: var(--tblr-muted);
    border: 1px solid var(--tblr-border-color);
    margin-right: 4px;
}

.playlist-type-tabs .nav-link.active {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
    background: rgba(var(--tblr-primary-rgb), .08);
}

.playlist-type-tabs .nav-link i {
    margin-right: 6px;
}

/* ----------------------------------------------------------------
   Action buttons - zawsze widoczne (nie ghost)
   Uzyj zamiast btn-ghost-* w kolumnach akcji tabel
   ---------------------------------------------------------------- */
.btn-action-edit,
.btn-action-secondary,
.btn-action-warning,
.btn-action-danger,
.btn-action-success {
    padding: 0.25rem 0.5rem;
    font-size: .8rem;
    border-radius: 4px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    min-width: 30px;
    min-height: 28px;
}

.btn-action-edit {
    color: #4dabf7 !important;
    background: rgba(77,171,247,.15) !important;
    border-color: rgba(77,171,247,.3) !important;
}
.btn-action-edit:hover {
    background: rgba(77,171,247,.28) !important;
    color: #74c0fc !important;
}

.btn-action-secondary {
    color: #adb5bd !important;
    background: rgba(173,181,189,.12) !important;
    border-color: rgba(173,181,189,.25) !important;
}
.btn-action-secondary:hover {
    background: rgba(173,181,189,.22) !important;
    color: #ced4da !important;
}

.btn-action-warning {
    color: #fcc419 !important;
    background: rgba(252,196,25,.15) !important;
    border-color: rgba(252,196,25,.3) !important;
}
.btn-action-warning:hover {
    background: rgba(252,196,25,.28) !important;
    color: #ffd43b !important;
}

.btn-action-success {
    color: #51cf66 !important;
    background: rgba(81,207,102,.15) !important;
    border-color: rgba(81,207,102,.3) !important;
}
.btn-action-success:hover {
    background: rgba(81,207,102,.28) !important;
    color: #69db7c !important;
}

.btn-action-danger {
    color: #ff6b6b !important;
    background: rgba(255,107,107,.15) !important;
    border-color: rgba(255,107,107,.3) !important;
}
.btn-action-danger:hover {
    background: rgba(255,107,107,.28) !important;
    color: #ff8787 !important;
}

/* Wymuś widoczność w kolumnie akcji */
.table-actions .btn-action-edit,
.table-actions .btn-action-secondary,
.table-actions .btn-action-warning,
.table-actions .btn-action-danger,
.table-actions .btn-action-success {
    opacity: 1 !important;
}

/* ----------------------------------------------------------------
.table-card .table {
    margin-bottom: 0;
}

.table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    opacity: .65;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table-actions {
    white-space: nowrap;
    text-align: right;
}

.table .btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: .8rem;
}

/* ----------------------------------------------------------------
   Search bar
   ---------------------------------------------------------------- */
.search-bar {
    max-width: 320px;
}

/* ----------------------------------------------------------------
   Log viewer
   ---------------------------------------------------------------- */
.log-entry {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: .8rem;
    border-bottom: 1px solid var(--tblr-border-color);
    padding: 0.35rem 0.75rem;
}

.log-entry:last-child { border-bottom: none; }

.log-level-info    { border-left: 3px solid #206bc4; }
.log-level-success { border-left: 3px solid #2fb344; }
.log-level-warning { border-left: 3px solid #f59f00; }
.log-level-error   { border-left: 3px solid #d63939; }

/* ----------------------------------------------------------------
   Avatar initials
   ---------------------------------------------------------------- */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Dashboard chart container
   ---------------------------------------------------------------- */
.chart-container {
    position: relative;
    height: 220px;
}

/* ----------------------------------------------------------------
   Empty state
   ---------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tblr-muted);
}

.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .3;
}

.empty-state .empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------
   Responsive tweaks
   ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .page-wrapper {
        margin-left: 0;
    }

    .search-bar {
        max-width: 100%;
    }

    .table-responsive .table-actions {
        min-width: 120px;
    }
}

/* ----------------------------------------------------------------
   Scrollbars (Webkit)
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tblr-border-color-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tblr-muted); }

/* ----------------------------------------------------------------
   Utility
   ---------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.fade-in {
    animation: fadeIn .25s ease;
}

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

/* ----------------------------------------------------------------
   Tom Select overrides
   ---------------------------------------------------------------- */
.ts-control {
    border-radius: var(--dp-radius) !important;
}

/* ----------------------------------------------------------------
   SweetAlert2 - match Tabler theme
   ---------------------------------------------------------------- */
.swal2-popup {
    border-radius: 8px !important;
    font-family: inherit !important;
}

[data-bs-theme="dark"] .swal2-popup {
    background: #1e2228 !important;
    color: #c8cdd3 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}

[data-bs-theme="dark"] .swal2-title { color: #e0e4e8 !important; }
[data-bs-theme="dark"] .swal2-html-container { color: #9aa0ac !important; }

/* ================================================================
   MODERNIZACJA UI - lepszy wyglad dark theme
   ================================================================ */

/* Sidebar - gradient i lepsza czytelnosc */
.navbar-vertical {
    background: linear-gradient(180deg, #1a1f2e 0%, #141824 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}

.navbar-vertical .navbar-brand {
    padding: 1.2rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.navbar-vertical .nav-link {
    border-radius: 6px;
    margin: 1px 8px;
    padding: 0.45rem 0.75rem;
    font-size: .845rem;
    transition: all .15s ease;
}

.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link.active {
    background: rgba(77,171,247,.12) !important;
    color: #4dabf7 !important;
}

/* Karty - subtelny border i shadow */
.card {
    border: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
    border-radius: 8px !important;
}

.card-header {
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.02) !important;
    padding: .75rem 1rem !important;
}

/* Tabela - zebra stripe i hover */
.table > tbody > tr:hover > td {
    background: rgba(77,171,247,.05) !important;
}

.table > tbody > tr:nth-child(even) > td {
    background: rgba(255,255,255,.015);
}

/* Stat cards - kolorowe top border */
.card.stat-card {
    border-top: 3px solid var(--tblr-primary) !important;
}

/* Badges - wyrazniejsze */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
}

/* Przyciski - lekkie zaokraglenie */
.btn {
    border-radius: 6px !important;
}

/* Formularze */
.form-control, .form-select {
    border-color: rgba(255,255,255,.12) !important;
    background-color: rgba(255,255,255,.04) !important;
}

.form-control:focus, .form-select:focus {
    border-color: rgba(77,171,247,.5) !important;
    box-shadow: 0 0 0 3px rgba(77,171,247,.15) !important;
    background-color: rgba(255,255,255,.06) !important;
}

/* Paginacja */
.pagination .page-link {
    border-radius: 5px !important;
    margin: 0 2px;
}

/* Taby */
.nav-tabs .nav-link {
    border-radius: 6px 6px 0 0 !important;
    font-size: .875rem;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
}

/* Sortable lista playlist - ladniejsze */
.sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-radius: 4px;
    transition: background .1s;
}

.sortable-item:last-child { border-bottom: none; }

.sortable-item:hover {
    background: rgba(255,255,255,.03);
}

.sortable-ghost {
    opacity: .4;
    background: rgba(77,171,247,.15) !important;
}

.sortable-chosen {
    background: rgba(77,171,247,.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Playlist type icon */
.playlist-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.playlist-type-icon.xtream {
    background: rgba(77,171,247,.15);
    color: #4dabf7;
}

.playlist-type-icon.m3u {
    background: rgba(81,207,102,.15);
    color: #51cf66;
}

.playlist-type-icon.stalker {
    background: rgba(190,75,219,.15);
    color: #be4bdb;
}

.playlist-info {
    flex: 1;
    min-width: 0;
}

.playlist-name {
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-meta {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Badge typy playlist */
.badge-xtream { background: rgba(77,171,247,.2) !important; color: #74c0fc !important; }
.badge-m3u    { background: rgba(81,207,102,.2) !important; color: #69db7c !important; }
.badge-stalker{ background: rgba(190,75,219,.2)  !important; color: #da77f2 !important; }
.badge-sm { font-size: .7rem !important; padding: .15em .4em !important; }

/* Status badges */
.badge.bg-green-lt  { background: rgba(81,207,102,.15)  !important; }
.badge.bg-red-lt    { background: rgba(255,107,107,.15)  !important; }
.badge.bg-yellow-lt { background: rgba(252,196,25,.15)   !important; }
.badge.bg-blue-lt   { background: rgba(77,171,247,.15)   !important; }

/* Nagłowek strony */
.page-header {
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* Pendinge alert */
.pending-devices-alert {
    border-left: 3px solid #fcc419 !important;
}

/* Log status badges */
.badge[class*="200"] { background: rgba(81,207,102,.2) !important; color: #69db7c !important; }
.badge[class*="404"] { background: rgba(255,107,107,.2) !important; color: #ff8787 !important; }
.badge[class*="403"] { background: rgba(252,196,25,.2)  !important; color: #ffd43b !important; }

/* Kolumna akcji - zawsze widoczna szerokos */
.table-actions { width: 110px; text-align: right; }

/* Toast - lepsza pozycja */
.swal2-toast-shown .swal2-container {
    bottom: 1rem !important;
    right: 1rem !important;
}

/* ================================================================
   SVG ikony w nav-link (zastepstwo dla ti fonts)
   ================================================================ */
.nav-link-icon svg,
.nav-link svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

/* Dropdown items z SVG */
.dropdown-item svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    opacity: .7;
}

.dropdown-item:hover svg,
.dropdown-item:focus svg {
    opacity: 1;
}

/* Flash messages z SVG */
.alert svg {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ================================================================
   Tom Select - dark theme fix
   ================================================================ */
.ts-wrapper .ts-control {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--tblr-body-color, #c8d3e0) !important;
    border-radius: 6px !important;
}

.ts-wrapper.focus .ts-control {
    border-color: rgba(77,171,247,.5) !important;
    box-shadow: 0 0 0 3px rgba(77,171,247,.15) !important;
}

.ts-wrapper .ts-dropdown {
    background: #1e2433 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    color: var(--tblr-body-color, #c8d3e0) !important;
}

.ts-wrapper .ts-dropdown .option {
    padding: 6px 12px;
    color: #c8d3e0 !important;
}

.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .option:hover {
    background: rgba(77,171,247,.15) !important;
    color: #74c0fc !important;
}

.ts-wrapper .ts-dropdown .option.selected {
    background: rgba(77,171,247,.2) !important;
    color: #4dabf7 !important;
}

.ts-wrapper .ts-dropdown-content::-webkit-scrollbar {
    width: 4px;
}
.ts-wrapper .ts-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}
.ts-wrapper .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 2px;
}

/* Placeholder */
.ts-wrapper .ts-control .ts-placeholder {
    color: rgba(255,255,255,.3) !important;
}

/* Clear button */
.ts-wrapper .ts-control .clear-button {
    color: rgba(255,255,255,.4) !important;
}

/* ================================================================
   Sortable - caly wiersz jako uchwyt, kursor move
   ================================================================ */
/* sortable-item cursor moved to overrides.css */

/* ================================================================
   SweetAlert2 - dark theme dla multi-select playlist
   ================================================================ */
.swal2-popup {
    background: #1e2433 !important;
    color: #c8d3e0 !important;
}

.swal2-title, .swal2-html-container {
    color: #c8d3e0 !important;
}

.swal2-popup .form-control,
.swal2-popup .form-select {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #c8d3e0 !important;
}

.swal2-popup .form-check-input {
    background-color: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.2) !important;
}

.swal2-popup .form-check-input:checked {
    background-color: #4dabf7 !important;
    border-color: #4dabf7 !important;
}

.swal-playlist-row:hover {
    background: rgba(77,171,247,.06) !important;
    border-radius: 4px;
}

#swal-playlist-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}

.swal2-validation-message {
    background: rgba(255,107,107,.15) !important;
    color: #ff8787 !important;
}