/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
.badge-outline-secondary {
    background-color: #fff;
    border: 1px solid #6c757d;
    font-weight: 500;
}

.apps-dropdown input[type="checkbox"] {
    accent-color: #6c757d;
}

.pagination .page-link {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #070707;
}

.pagination .page-link:hover {
    background-color: #687079;
    border-color: #687079;
    color: #fff;
}

.pagination .active .page-link {
    background-color: #687079;
    border-color: #687079;
    color: #fff;
}

.sidebar-btn {
    background-color: transparent;
    border: none;
    color: #333;
    text-align: left;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* як btn */
    transition: background-color 0.2s;
    text-decoration: none;
}

.sidebar-btn:hover {
    background-color: #e0e0e0; /* світло-сірий при наведенні */
    color: #000;
}

.sidebar-btn.active {
    background-color: #d0d0d0; /* трохи темніший сірий для активної сторінки */
    color: #000;
}

.admin-form {
    max-width: 400px; /* ширина форми */
}

.admin-form .form-group {
    position: relative; /* для кнопки всередині інпуту */
    margin-bottom: 1rem;
}

.admin-form .form-control {
    width: 100%; /* фіксована ширина поля */
    padding-right: 2.5rem; /* місце для кнопки 👁 */
    box-sizing: border-box;
}

.admin-form .toggle-password-btn {
    position: absolute;
    top: 70%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}