/* Brand the settings top bar to match site accent and improve UX */

.tk-area-settings .tk-top-bar {
    position: sticky !important;
    top: 55px !important; /* below fixed main header */
    z-index: 905 !important;
    background: linear-gradient(135deg, #c71e23 0%, #a11b1f 100%) !important;
    padding: 20px 24px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important;
}

.tk-area-settings .tk-top-bar-left .settings-header-icon {
    background: rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(10px) !important;
}
.tk-area-settings .tk-top-bar-left .settings-header-icon i {
    color: #ffffff !important;
}
.tk-area-settings .tk-top-bar-left .settings-header-text h2,
.tk-area-settings .tk-top-bar-left .settings-header-text p {
    color: #ffffff !important;
}
/* Slightly increase title size with responsive clamp */
.tk-area-settings .tk-top-bar-left .settings-header-text h2 {
    font-size: clamp(20px, 2.2vw, 32px) !important;
    letter-spacing: -0.2px !important;
}

/* Search: pill with brand accent on focus */
.tk-area-settings .tk-top-bar-right .modern-search-box {
    background: rgba(255,255,255,0.16) !important;
    border: 2px solid rgba(255,255,255,0.22) !important;
    min-width: 300px !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box i {
    color: rgba(255,255,255,0.85) !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box:hover,
.tk-area-settings .tk-top-bar-right .modern-search-box:focus-within {
    background: rgba(255,255,255,0.98) !important;
    border-color: #ffffff !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box:hover i,
.tk-area-settings .tk-top-bar-right .modern-search-box:focus-within i {
    color: #c71e23 !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box input {
    color: #ffffff !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box:hover input,
.tk-area-settings .tk-top-bar-right .modern-search-box:focus-within input {
    color: #111827 !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box .search-shortcut {
    background: rgba(255,255,255,0.22) !important;
    color: rgba(255,255,255,0.85) !important;
}
.tk-area-settings .tk-top-bar-right .modern-search-box:hover .search-shortcut,
.tk-area-settings .tk-top-bar-right .modern-search-box:focus-within .search-shortcut {
    background: #e5e7eb !important;
    color: #6b7280 !important;
}

/* Save button: white pill with brand text & hover tint */
/* Save button: solid brand red with white text */
.tk-area-settings .tk-top-bar-right .tk-save-changes-modern {
    background: linear-gradient(135deg, #c71e23 0%, #a11b1f 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(199,30,35,0.30) !important;
}
.tk-area-settings .tk-top-bar-right .tk-save-changes-modern::before {
    background: rgba(255,255,255,0.15) !important;
}
.tk-area-settings .tk-top-bar-right .tk-save-changes-modern:hover {
    box-shadow: 0 10px 28px rgba(199,30,35,0.38) !important;
}

/* Back to Dashboard link */
.tk-area-settings .settings-back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin-right: 10px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
.tk-area-settings .settings-back-link:hover {
    background: rgba(255,255,255,0.20) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}
.tk-area-settings .settings-back-link i {
    font-size: 14px !important;
}

/* Small screens: keep bar readable under the fixed header */
@media (max-width: 768px) {
    .tk-area-settings .tk-top-bar {
        top: 55px !important;
        padding: 14px 16px !important;
    }
    .tk-area-settings .tk-top-bar-right .modern-search-box {
        min-width: 0 !important;
        width: 100% !important;
    }
}