/* Extracted from keybox/checker/index.php */

body {
    background-color: #0B0B0C; /* --bg-root */
    color: #A1A1A6; /* --text-secondary */
    font-family: 'Inter', sans-serif;
}

.dark body {
    background-color: #0B0B0C;
    color: #A1A1A6;
}

a {
    color: #F5F5F7; /* --accent */
    text-decoration: none;
}

a:hover {
    color: #ffffff; /* --accent-hover */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #111113;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #27272A;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #A1A1A6;
}

/* Mobile Date Input Fix */
input[type="date"] {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* Component Styles (Fallback for Tailwind CDN issues) */
html {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Monochrome Selection */
::selection {
    background-color: #EDEDED;
    color: #000000;
    text-shadow: none;
}

/* Custom Monochrome Checkbox */
.form-checkbox-monochrome {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #161618 !important;
    background-image: none !important;
    background-origin: border-box !important;
    margin: 0;
    font: inherit;
    color: currentColor !important;
    width: 1.25em;
    height: 1.25em;
    border: 1px solid #A1A1A6 !important;
    border-radius: 0.25em;
    transition: all 0.2s ease-in-out;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    print-color-adjust: exact;
}

/* Enhanced reset for search inputs */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
}

/* Focus State - Remove Blue Ring */
.form-checkbox-monochrome:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #F5F5F7 !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
}

/* Checked State */
.form-checkbox-monochrome:checked {
    background-color: #000000 !important;
    border-color: #F5F5F7 !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23F5F5F7' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2.5-2.5a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

/* Legacy Cleanup */
.form-checkbox-monochrome::before {
    display: none !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
    backface-visibility: hidden;
    background-clip: padding-box;
}

.btn:active {
    transform: scale(0.98);
}

.btn-glow-primary {
    color: #0B0B0C;
    background: #F5F5F7;
    border: none;
    outline: none;
    will-change: transform;
}

.btn-glow-primary:hover {
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-secondary {
    color: #F5F5F7;
    background: #111113;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-secondary:hover {
    background: #161618;
    border-color: rgba(255, 255, 255, 0.15);
}

.glass-card {
    background: #111113;
    backdrop-filter: blur(16px);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.status-card {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s;
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #F5F5F7;
    transition: all 0.3s ease-in-out;
}

.status-text-pass {
    color: #4ade80;
}

.status-text-meets {
    color: #fbbf24;
}

.status-text-fail {
    color: #f87171;
}

/* Update text colors for legibility */
.text-[#A1A1A6] {
    color: #F5F5F7 !important;
}

/* Header alignment fix */
.result-header-container {
    align-items: center !important;
}

@media (max-width: 640px) {
    .font-mono,
    .break-all-mobile {
        word-break: break-all;
    }

    /* Fix certificate chain cards width on mobile */
    .cert-chain-grid>div {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Trust Score button styling */
.btn-trust-score {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.btn-trust-score:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #161618;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #A1A1A6;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #71717A;
}

.loader {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: #F5F5F7;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}