/**
 * Custom Styles for TruSIP Payments Portal
 */

/* TruSIP Brand Color: RGB(90, 158, 182) = #5A9EB6 */
:root {
    --trusip-primary: #5A9EB6;
    --trusip-primary-rgb: 90, 158, 182;
    --trusip-primary-dark: #4a8a9f;
    --trusip-primary-light: #7ab3c7;
}

/* Override Tabler primary color with TruSIP brand */
[data-bs-theme="dark"] .navbar-vertical,
.navbar-vertical[data-bs-theme="dark"] {
    background-color: var(--trusip-primary) !important;
}

/* Sidebar brand styling */
.navbar-vertical .navbar-brand {
    color: #f0f8fa;
}

/* Sidebar nav links - light text */
.navbar-vertical .nav-link {
    color: #e8f4f7 !important;
}

.navbar-vertical .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15);
}

.navbar-vertical .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* Sidebar nav link titles */
.navbar-vertical .nav-link-title {
    color: inherit;
}

/* Sidebar icons */
.navbar-vertical .nav-link-icon {
    color: #e8f4f7;
}

.navbar-vertical .nav-link:hover .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-icon {
    color: #fff;
}

/* Avatar in sidebar */
.navbar-vertical .avatar {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border: none !important;
}

.navbar-vertical .avatar .icon {
    color: #fff !important;
}

/* Dropdown divider in sidebar */
.navbar-vertical .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.25);
}

/* Ensure sidebar logo text is visible */
.navbar-brand .nav-link-title {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Primary button brand color */
.btn-primary {
    --tblr-btn-bg: var(--trusip-primary);
    --tblr-btn-border-color: var(--trusip-primary);
    --tblr-btn-hover-bg: var(--trusip-primary-dark);
    --tblr-btn-hover-border-color: var(--trusip-primary-dark);
    --tblr-btn-active-bg: var(--trusip-primary-dark);
    --tblr-btn-active-border-color: var(--trusip-primary-dark);
}

/* Primary text color */
.text-primary {
    color: var(--trusip-primary) !important;
}

/* Links */
a {
    color: var(--trusip-primary);
}

a:hover {
    color: var(--trusip-primary-dark);
}

/* Nav link active state */
.navbar-vertical .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Avatar background for profile - outside sidebar */
.page-body .avatar.bg-primary-lt {
    background-color: rgba(var(--trusip-primary-rgb), 0.2) !important;
    color: var(--trusip-primary) !important;
}

/* Card hover effect */
.card-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.15s ease-in-out;
}

/* Status badges */
.badge-status {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* Customer list row hover */
.table tbody tr:hover {
    background-color: rgba(var(--tblr-primary-rgb), 0.04);
}

/* Clickable table rows */
.table-clickable tbody tr {
    cursor: pointer;
}

/* Loading spinner overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Currency input */
.currency-input .input-group-text {
    font-weight: 600;
}

/* Payment history table */
.payment-history-table th {
    white-space: nowrap;
}

/* Sync status indicator */
.sync-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sync-status .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* Empty state */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--tblr-secondary);
}

.empty-state .icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Quick stats */
.stat-card {
    border-left: 3px solid var(--tblr-primary);
}

/* Customer info definition list */
.customer-info dt {
    font-weight: 500;
    color: var(--tblr-secondary);
}

.customer-info dd {
    margin-bottom: 0.75rem;
}

/* Toast styling */
#toast-container .toast {
    margin-bottom: 0.5rem;
}