/* ===== App-specific Overrides for StringLock Design System ===== */
/* This file bridges the gap between existing HTML structure and new design system */

/* ===== Override Tailwind/DaisyUI Classes ===== */

/* Navigation Bar Overrides */
.navbar {
    background: var(--sl-bg-primary) !important;
    border-bottom: 1px solid var(--sl-border) !important;
    box-shadow: var(--sl-shadow-xs) !important;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    min-height: 64px;
    padding: 0 var(--sl-spacing-md);
}

.navbar-start, .navbar-center, .navbar-end {
    align-items: center;
}

/* Button overrides */
.btn {
    padding: 10px 20px !important;
    border-radius: var(--sl-radius-md) !important;
    font-size: var(--sl-font-body) !important;
    font-weight: var(--sl-font-semibold) !important;
    transition: all var(--sl-transition-normal) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-primary {
    background: var(--sl-brand-blue) !important;
    color: white !important;
    box-shadow: var(--sl-shadow-sm) !important;
}

.btn-primary:hover {
    background: var(--sl-brand-blue-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--sl-shadow-md) !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--sl-text-primary) !important;
}

.btn-ghost:hover {
    background: var(--sl-gray-50) !important;
}

.btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--sl-border) !important;
    color: var(--sl-text-primary) !important;
}

.btn-outline:hover {
    background: var(--sl-gray-50) !important;
    border-color: var(--sl-brand-blue) !important;
}

.btn-sm {
    padding: 6px 12px !important;
    font-size: var(--sl-font-small) !important;
}

.btn-lg {
    padding: 14px 28px !important;
    font-size: 16px !important;
}

.btn-circle {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: var(--sl-radius-full) !important;
}

/* Card overrides */
.card {
    background: var(--sl-bg-primary) !important;
    border-radius: var(--sl-radius-lg) !important;
    border: 1px solid var(--sl-border) !important;
    box-shadow: var(--sl-shadow-sm) !important;
    transition: all var(--sl-transition-normal) !important;
}

.card:hover {
    box-shadow: var(--sl-shadow-md) !important;
    transform: translateY(-2px);
}

.card-body {
    padding: var(--sl-spacing-md) !important;
}

.card-title {
    font-size: var(--sl-font-subheading) !important;
    font-weight: var(--sl-font-bold) !important;
    color: var(--sl-text-primary) !important;
    margin-bottom: 12px !important;
}

/* Modal overrides */
.modal {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

.modal-box {
    background: var(--sl-bg-primary) !important;
    border-radius: var(--sl-radius-xl) !important;
    box-shadow: var(--sl-shadow-xl) !important;
    border: none !important;
}

.modal-action {
    padding: var(--sl-spacing-sm) 0 0 !important;
    border-top: 1px solid var(--sl-border) !important;
    margin-top: var(--sl-spacing-md) !important;
}

/* Menu overrides */
.menu {
    padding: 8px !important;
}

.menu li {
    margin: 2px 0 !important;
}

.menu li a {
    padding: 8px 16px !important;
    border-radius: var(--sl-radius-md) !important;
    color: var(--sl-text-secondary) !important;
    font-weight: var(--sl-font-medium) !important;
    transition: all var(--sl-transition-fast) !important;
}

.menu li a:hover {
    background: var(--sl-gray-50) !important;
    color: var(--sl-text-primary) !important;
}

.menu-title {
    font-size: var(--sl-font-small) !important;
    color: var(--sl-text-tertiary) !important;
    font-weight: var(--sl-font-semibold) !important;
    padding: 8px 16px !important;
}

/* Dropdown overrides */
.dropdown-content {
    background: var(--sl-bg-primary) !important;
    border-radius: var(--sl-radius-lg) !important;
    box-shadow: var(--sl-shadow-lg) !important;
    border: 1px solid var(--sl-border) !important;
    padding: 8px !important;
    margin-top: 8px !important;
}

/* Alert overrides */
.alert {
    border-radius: var(--sl-radius-md) !important;
    padding: 14px 16px !important;
}

.alert-success {
    background: var(--sl-success-bg) !important;
    color: var(--sl-success) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.alert-error {
    background: var(--sl-error-bg) !important;
    color: var(--sl-error) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.alert-warning {
    background: var(--sl-warning-bg) !important;
    color: var(--sl-warning) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.alert-info {
    background: var(--sl-info-bg) !important;
    color: var(--sl-info) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Badge overrides */
.badge {
    padding: 4px 10px !important;
    border-radius: var(--sl-radius-sm) !important;
    font-size: var(--sl-font-tiny) !important;
    font-weight: var(--sl-font-semibold) !important;
    border: none !important;
}

.badge-primary {
    background: var(--sl-brand-blue) !important;
    color: white !important;
}

.badge-success {
    background: var(--sl-success-bg) !important;
    color: var(--sl-success) !important;
}

.badge-error {
    background: var(--sl-error-bg) !important;
    color: var(--sl-error) !important;
}

.badge-warning {
    background: var(--sl-warning-bg) !important;
    color: var(--sl-warning) !important;
}

/* Progress overrides */
.progress {
    height: 8px !important;
    background: var(--sl-gray-200) !important;
    border-radius: var(--sl-radius-full) !important;
}

.progress-primary {
    background: var(--sl-brand-blue) !important;
}

.progress-success {
    background: var(--sl-success) !important;
}

/* Input overrides */
.input,
.select,
.textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: var(--sl-font-body) !important;
    border: 1.5px solid var(--sl-border) !important;
    border-radius: var(--sl-radius-md) !important;
    background: var(--sl-bg-primary) !important;
    color: var(--sl-text-primary) !important;
    transition: all var(--sl-transition-fast) !important;
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none !important;
    border-color: var(--sl-brand-blue) !important;
    box-shadow: 0 0 0 3px var(--sl-brand-blue-subtle) !important;
}

.input-bordered {
    border: 1.5px solid var(--sl-border) !important;
}

.input-sm {
    padding: 6px 10px !important;
    font-size: var(--sl-font-small) !important;
}

.input-lg {
    padding: 14px 18px !important;
    font-size: 16px !important;
}

/* Table overrides */
.table {
    width: 100% !important;
    background: var(--sl-bg-primary) !important;
    border-radius: var(--sl-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--sl-shadow-sm) !important;
}

.table thead {
    background: var(--sl-gray-50) !important;
}

.table th {
    padding: 14px 16px !important;
    font-size: var(--sl-font-small) !important;
    font-weight: var(--sl-font-semibold) !important;
    color: var(--sl-text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--sl-border) !important;
}

.table td {
    padding: 14px 16px !important;
    font-size: var(--sl-font-body) !important;
    color: var(--sl-text-primary) !important;
    border-bottom: 1px solid var(--sl-gray-100) !important;
}

.table tbody tr:hover {
    background: var(--sl-gray-50) !important;
}

/* Loading spinner override */
.loading {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--sl-gray-300) !important;
    border-top-color: var(--sl-brand-blue) !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}

.loading-lg {
    width: 40px !important;
    height: 40px !important;
    border-width: 3px !important;
}

/* Divider overrides */
.divider {
    margin: var(--sl-spacing-md) 0 !important;
    color: var(--sl-text-tertiary) !important;
}

/* Stat overrides */
.stat {
    padding: var(--sl-spacing-md) !important;
    background: var(--sl-bg-primary) !important;
    border-radius: var(--sl-radius-lg) !important;
    border: 1px solid var(--sl-border) !important;
}

.stat-title {
    font-size: var(--sl-font-small) !important;
    color: var(--sl-text-tertiary) !important;
    font-weight: var(--sl-font-medium) !important;
    margin-bottom: 8px !important;
}

.stat-value {
    font-size: var(--sl-font-heading) !important;
    font-weight: var(--sl-font-bold) !important;
    color: var(--sl-text-primary) !important;
}

.stat-desc {
    font-size: var(--sl-font-small) !important;
    color: var(--sl-text-secondary) !important;
    margin-top: 8px !important;
}

/* Tabs overrides */
.tabs {
    border-bottom: 1px solid var(--sl-border) !important;
}

.tab {
    padding: 12px 24px !important;
    font-weight: var(--sl-font-medium) !important;
    color: var(--sl-text-secondary) !important;
    border-bottom: 2px solid transparent !important;
    transition: all var(--sl-transition-fast) !important;
}

.tab:hover {
    color: var(--sl-text-primary) !important;
}

.tab-active {
    color: var(--sl-brand-blue) !important;
    border-bottom-color: var(--sl-brand-blue) !important;
    font-weight: var(--sl-font-semibold) !important;
}

/* Swap (theme toggle) overrides */
.swap {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--sl-radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Avatar overrides */
.avatar {
    width: 36px !important;
    height: 36px !important;
}

.avatar .rounded-full {
    border-radius: var(--sl-radius-full) !important;
}

/* Text color utilities */
.text-primary {
    color: var(--sl-brand-blue) !important;
}

.text-success {
    color: var(--sl-success) !important;
}

.text-error {
    color: var(--sl-error) !important;
}

.text-warning {
    color: var(--sl-warning) !important;
}

/* Background utilities */
.bg-base-100 {
    background: var(--sl-bg-primary) !important;
}

.bg-base-200 {
    background: var(--sl-gray-50) !important;
}

.bg-base-300 {
    background: var(--sl-gray-100) !important;
}

.bg-primary {
    background: var(--sl-brand-blue) !important;
}

.bg-primary-content {
    color: white !important;
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: var(--sl-shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--sl-shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--sl-shadow-lg) !important;
}

.shadow-xl {
    box-shadow: var(--sl-shadow-xl) !important;
}

/* Rounded utilities */
.rounded-box {
    border-radius: var(--sl-radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--sl-radius-xl) !important;
}

.rounded-full {
    border-radius: var(--sl-radius-full) !important;
}

/* Animation Enhancements */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .navbar {
        padding: 0 var(--sl-spacing-sm);
    }

    .card-body {
        padding: var(--sl-spacing-sm) !important;
    }
}

@media (max-width: 768px) {
    .btn {
        padding: 8px 16px !important;
        font-size: var(--sl-font-small) !important;
    }

    .modal-box {
        margin: 16px !important;
        max-width: calc(100vw - 32px) !important;
    }
}