/* ==========================================================================
   1. Zmienne globalne i Reset
   ========================================================================== */
:root {
    --bg-color: #f4f6f9;
    --card-radius: 10px;
}

body { 
    background-color: var(--bg-color); 
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
}

/* Navbar & Card Overrides */
.navbar { 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.card { 
    border-radius: var(--card-radius); 
    border: none; 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.card-header { 
    border-top-left-radius: var(--card-radius) !important; 
    border-top-right-radius: var(--card-radius) !important; 
}

/* ==========================================================================
   2. Elementy Sortowalne (SortableJS)
   ========================================================================== */
.grab-handle { 
    cursor: grab; 
}

.grab-handle:active { 
    cursor: grabbing; 
}

/* Duch przeciąganego elementu (zabezpieczone background-color) */
.sortable-ghost { 
    opacity: 0.4; 
    background-color: #e9ecef !important; 
    border: 2px dashed #6c757d !important; 
    border-radius: 5px; 
}

/* ==========================================================================
   3. Kafelki i Tła (Items)
   ========================================================================== */
.list-group-item { 
    border-radius: 5px !important; /* Nadpisuje domyślny border-radius Bootstrapa */
    margin-bottom: 5px; 
    border: 1px solid rgba(0, 0, 0, 0.05); 
}

/* Priorytetowy status (Urgent) */
.list-group-item.urgent { 
    border-left: 5px solid #dc3545 !important; 
    background-color: #fff5f5 !important; 
}

/* Naprzemienne tło kafelków (wyklucza status .urgent) */
.sortable-items .list-group-item:nth-child(odd):not(.urgent) { 
    background-color: rgba(255, 255, 255, 0.95); 
}

.sortable-items .list-group-item:nth-child(even):not(.urgent) { 
    background-color: rgba(220, 225, 230, 0.7); 
    border: 1px solid rgba(0, 0, 0, 0.08); 
}

/* ==========================================================================
   4. Markdown Editor (SimpleMDE / EasyMDE) Overrides
   ========================================================================== */
.editor-toolbar { 
    background: #ffffff; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
}

.CodeMirror { 
    background: #ffffff; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
}

/* ==========================================================================
   5. Kontrola Widoczności Trybu Edycji
   ========================================================================== */
body:not(.edit-mode) .js-edit-cat,
body:not(.edit-mode) .js-edit-sub,
body:not(.edit-mode) .js-edit-item,
body:not(.edit-mode) .btn-delete-confirm,
body:not(.edit-mode) form[action*="/delete"] {
    display: none !important;
}
/* ==========================================================================
   6. Globalne Usprawnienia UI (Dodane automatycznie)
   ========================================================================== */
.modal-content {
    border-radius: var(--card-radius);
    border: none;
    overflow: hidden;
}

.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
}