/**
 * Additional Enhancements for WHMCS Twenty-One Theme
 * Component-specific improvements for better glassmorphism effect
 */

/* ============================================
   TILES / STATS WIDGETS (Dashboard)
   ============================================ */
.tiles .tile {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-base) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.tiles .tile:hover {
    background: var(--card-bg-hover) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-4px);
}

.tiles .tile .stat {
    color: var(--text-primary) !important;
    font-weight: 700;
}

.tiles .tile .title {
    color: var(--text-secondary) !important;
}

.tiles .tile .highlight {
    opacity: 0.2;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar .panel,
.sidebar .card {
    background: var(--card-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid var(--card-border) !important;
}

.sidebar .panel-heading {
    color: var(--text-primary) !important;
}

.sidebar .list-group-item {
    background: transparent !important;
    border-color: var(--card-border) !important;
    color: var(--text-secondary) !important;
}

.sidebar .list-group-item:hover,
.sidebar .list-group-item.active {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent-blue) !important;
}

/* ============================================
   FORMS IN CARDS
   ============================================ */
.card .form-group label,
.panel .form-group label {
    color: var(--text-secondary) !important;
}

/* Prepend Icon Styling */
.prepend-icon .field-icon {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    z-index: 10;
}

.prepend-icon .field {
    padding-left: 50px !important;
}

/* ============================================
   INVOICE & PRODUCT DETAILS
   ============================================ */
.invoice-details,
.product-details {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-lg) !important;
}

.invoice-html-container,
.product-details-tab-container {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   TICKETS & SUPPORT
   ============================================ */
.ticket,
.ticket-container {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
}

.ticket-reply {
    background: rgba(255, 255, 255, 0.03) !important;
    border-left: 3px solid var(--accent-blue) !important;
}

/* ============================================
   TOPBAR (Logged in users)
   ============================================ */
.topbar {
    background: rgba(10, 22, 40, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

.topbar .btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-secondary) !important;
}

.topbar .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

.topbar .input-group-text {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--card-border) !important;
    color: var(--text-secondary) !important;
}

.topbar .btn-active-client {
    background: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: #ffffff !important;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar.navbar-light {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    border-bottom: 1px solid var(--card-border) !important;
    position: relative;
    z-index: 1030 !important;
}

.main-navbar-wrapper {
    background: rgba(45, 55, 72, 0.3) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--card-border) !important;
    position: relative;
    z-index: 1030 !important;
}

.navbar .navbar-brand {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* Navbar navigation links - white text */
.navbar-nav.mr-auto .nav-link,
.navbar-nav .nav-link {
    color: #ffffff !important;
    transition: color var(--transition-fast);
}

.navbar-nav.mr-auto .nav-link:hover,
.navbar-nav .nav-link:hover {
    color: var(--accent-blue) !important;
}

.navbar .btn.nav-link {
    background: transparent !important;
}

.navbar .cart-btn {
    position: relative;
}

.navbar .badge-info {
    background: var(--accent-blue) !important;
    color: #ffffff !important;
}

/* Breadcrumb z-index */
.master-breadcrumb {
    position: relative;
    z-index: 1020 !important;
}

/* ============================================
   DOMAIN SEARCH
   ============================================ */
.domain-search-container,
.home-shortcuts {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 30px;
    margin: 30px 0;
}

.domain-search-container .input-group .form-control {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   POPOVERS & TOOLTIPS
   ============================================ */
.popover {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

.popover-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--card-border) !important;
    color: var(--text-primary) !important;
}

.popover-body {
    color: var(--text-secondary) !important;
}

.tooltip-inner {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   CLIENT ALERTS (Notifications)
   ============================================ */
.client-alerts {
    background: var(--card-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.client-alerts li {
    border-bottom: 1px solid var(--card-border) !important;
}

.client-alerts li:last-child {
    border-bottom: none;
}

.client-alerts li a {
    color: var(--text-primary) !important;
    padding: 12px 16px;
    display: block;
    transition: background var(--transition-fast);
}

.client-alerts li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    text-decoration: none;
}

/* ============================================
   SHOPPING CART
   ============================================ */
.cart-items,
.order-summary {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-lg) !important;
}

.order-summary .total-row {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* ============================================
   PRODUCT STATUS BADGES
   ============================================ */
.product-status {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.product-status-active {
    background: var(--success) !important;
}

.product-status-pending {
    background: var(--warning) !important;
}

.product-status-suspended,
.product-status-cancelled,
.product-status-terminated {
    background: var(--danger) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.master-breadcrumb {
    background: transparent !important;
    padding: 15px 0;
}

.breadcrumb {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border) !important;
    padding: 10px 16px;
}

.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-muted) !important;
}

/* ============================================
   TEXTAREA
   ============================================ */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* ============================================
   MARKDOWN EDITOR
   ============================================ */
.md-editor>.md-preview,
.md-editor>textarea.markdown-editor {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.md-editor>.md-preview {
    padding: 12px 16px;
}

.md-editor>textarea.markdown-editor:focus {
    background: var(--input-bg-focus) !important;
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.md-editor {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

/* ============================================
   SELECT DROPDOWN
   ============================================ */
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 12px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    padding-right: 40px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* ============================================
   CHECKBOX & RADIO CUSTOM STYLES
   ============================================ */
.form-check-input[type="checkbox"] {
    border-radius: 4px;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

/* ============================================
   LINKED ACCOUNTS (Social Login Buttons)
   ============================================ */
.linked-accounts .btn {
    margin-bottom: 10px;
}

.provider-facebook {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
}

.provider-google {
    background: #ea4335 !important;
    border-color: #ea4335 !important;
}

.provider-apple {
    background: #000000 !important;
    border-color: #000000 !important;
}

/* ============================================
   LOADING & SPINNERS
   ============================================ */
.spinner-border {
    border-color: var(--accent-blue);
    border-right-color: transparent;
}

.btn .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--card-blur)) !important;
    -webkit-backdrop-filter: blur(var(--card-blur)) !important;
    border-top: 1px solid var(--card-border) !important;
    color: var(--text-secondary) !important;
    margin-top: 40px;
}

footer a {
    color: var(--text-secondary) !important;
}

footer a:hover {
    color: var(--accent-blue) !important;
}

/* ============================================
   ANNOUNCEMENTS
   ============================================ */
.announcement {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px;
    margin-bottom: 20px;
}

.announcement h3 {
    color: var(--text-primary) !important;
}

.announcement-date {
    color: var(--text-muted) !important;
    font-size: 0.9rem;
}

/* ============================================
   KNOWLEDGEBASE
   ============================================ */
.kb-category,
.kb-article {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-base);
}

.kb-category:hover,
.kb-article:hover {
    background: var(--card-bg-hover) !important;
    border-color: var(--card-border-hover) !important;
    transform: translateY(-2px);
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
}

/* ============================================
   CUSTOM UTILITIES
   ============================================ */
.text-glow {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.border-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* ============================================
   TABLE LIST CUSTOM STYLING
   ============================================ */
.table-list>tbody>tr>td {
    background-color: #3d4f69 !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */
@media (max-width: 992px) {
    .sidebar {
        margin-bottom: 20px;
    }

    .tiles .tile {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .card-body {
        padding: 20px !important;
    }

    h1,
    .h1 {
        font-size: 1.75rem !important;
    }

    h2,
    .h2 {
        font-size: 1.5rem !important;
    }

    h3,
    .h3 {
        font-size: 1.25rem !important;
    }
}