/**
 * Shared UI utilities loaded on every layout (admin + frontend templates).
 * Keep small, reusable components here — not page-specific styles.
 */

/**
 * Slow Facebook/Android-style shimmer for loading placeholders.
 * Prefer keeping final text shape stable (e.g. "0 dokončených") and add this class while loading.
 *
 * Prefer applying on a <span> inside buttons (button `background` can kill text-clip shimmer).
 *
 * Text:  <span class="ui-shimmer-text">0 dokončených</span>
 * Block: <div class="ui-shimmer-block" style="height:12px;width:120px"></div>
 */
.ui-shimmer-text {
    display: inline;
    color: transparent !important;
    /* !important: parent `background:` shorthand must not wipe the gradient */
    background-color: transparent !important;
    background-image: linear-gradient(
        90deg,
        #c4c9d2 0%,
        #c4c9d2 32%,
        #f8fafc 50%,
        #c4c9d2 68%,
        #c4c9d2 100%
    ) !important;
    background-size: 220% 100% !important;
    background-repeat: no-repeat !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: ui-shimmer-sweep 2.4s ease-in-out infinite;
}

.ui-shimmer-block {
    display: block;
    border-radius: 6px;
    background-color: #e5e7eb !important;
    background-image: linear-gradient(
        90deg,
        #e5e7eb 0%,
        #e5e7eb 32%,
        #f9fafb 50%,
        #e5e7eb 68%,
        #e5e7eb 100%
    ) !important;
    background-size: 220% 100% !important;
    background-repeat: no-repeat !important;
    animation: ui-shimmer-sweep 2.4s ease-in-out infinite;
}

@keyframes ui-shimmer-sweep {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-shimmer-text {
        animation: none;
        color: #9ca3af !important;
        background-image: none !important;
        -webkit-text-fill-color: unset !important;
        opacity: 0.7;
    }

    .ui-shimmer-block {
        animation: none;
        background: #e5e7eb !important;
    }
}

/**
 * Page-level “Späť” control — same look everywhere (top of content / toolbars).
 * Use: <a class="btn ui-back-btn" href="..."><i class="fa fa-chevron-left"></i> Späť …</a>
 */
.ui-back-btn,
a.ui-back-btn,
button.ui-back-btn,
span.ui-back-btn,
.btn.ui-back-btn,
.btn.btn-sm.ui-back-btn,
.btn.btn-default.ui-back-btn,
.btn.btn-danger.ui-back-btn,
.btn.btn-light.ui-back-btn,
.btn.btn-block.ui-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
    margin: 0;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    border-radius: 20px !important;
    border: 1px solid #d9dee2 !important;
    background: #fff !important;
    background-image: none !important;
    color: #374151 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}

.ui-back-btn:hover,
.ui-back-btn:focus,
.ui-back-btn:active,
a.ui-back-btn:hover,
a.ui-back-btn:focus,
a.ui-back-btn:active,
.btn.ui-back-btn:hover,
.btn.ui-back-btn:focus,
.btn.ui-back-btn:active {
    background: #f7f8f9 !important;
    border-color: #cfd5da !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.ui-back-btn > i,
.ui-back-btn .fa,
.ui-back-btn .fa-solid {
    margin: 0 !important;
    font-size: 12px;
    line-height: 1;
    color: inherit;
}

.btn + .ui-back-btn,
.ui-back-btn + .btn,
.ui-back-btn + .ui-back-btn {
    margin-left: 8px !important;
}

/* Password show/hide — centered inside the input (MDB .form-group is position:relative) */
.password-input-wrap {
    position: relative;
    display: block;
}

.password-input-wrap > input,
.password-input-wrap > input.form-control {
    padding-right: 42px;
}

.password-input-wrap .password-toggle-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    color: #6b7280;
    line-height: 1;
    padding: 4px;
    margin: 0;
}

.password-input-wrap .password-toggle-icon:hover {
    color: #374151;
}

.password-input-wrap .password-toggle-icon .fa,
.password-input-wrap .password-toggle-icon .fa-solid {
    margin: 0;
}