body {
    font-family: 'Inter', sans-serif;
    background-color: #e3f2fd; /* Light blue fallback */
    background-image: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
    background-repeat: no-repeat;
    background-attachment: fixed; /* Makes the background static */
}
.font-poppins {
    font-family: 'Poppins', sans-serif;
}
.font-roboto-condensed {
    font-family: 'Roboto Condensed', sans-serif;
}
.header-bg {
    /* Updated gradient colors */
    background-color: #2769d6; /* Fallback */
    background-image: radial-gradient(circle at 50% 0%, #3eabf1, #2769d6 80%);
    background-size: cover;
    background-position: center;
}

/* Mobile drawer menu: enforce system UI font to avoid flashes and match auth items */
.mobile-drawer-menu, .mobile-drawer-menu button {
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header responsive utilities */
.title-text { font-size: 2rem; }
.subtitle-text { font-size: 1rem; }
@media (max-width: 768px) {
    .nav-desktop { display: none !important; }
    .hamburger-mobile { display: inline-flex !important; }
    .mobile-left { justify-content: flex-start !important; }
    .title-text { font-size: clamp(1.4rem, 5vw, 2rem); white-space: nowrap; padding-right: 1rem; }
    .subtitle-text { font-size: clamp(0.65rem, 2.8vw, 1rem); white-space: nowrap; padding-right: 1rem; }
}

/* Domain input placeholder - prevent wrapping and scale down on mobile */
#domainInput::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    #domainInput::placeholder {
        font-size: clamp(0.75rem, 3.5vw, 1rem);
    }
}
@media (max-width: 380px) {
    #domainInput::placeholder {
        font-size: clamp(0.7rem, 3.2vw, 0.9rem);
    }
}
.table-container {
    overflow-x: auto;
    width: 100%; /* Force container to fill parent width */
    min-width: 100%; /* Prevent container from shrinking */
}

/* Minimum height for table body to prevent dropdown cutoff */
#tableBody {
    min-height: 400px;
    /* Ensure table is always visible even with no data */
    display: table-row-group;
}

/* Empty row styling for minimum height */
.empty-row {
    height: 40px;
    background-color: #f9fafb;
}

.empty-row:nth-child(even) {
    background-color: #ffffff;
}

.empty-row td {
    border-bottom: 1px solid #e5e7eb;
}
table {
    border-collapse: collapse; /* Changed from separate to collapse for full-width backgrounds */
    border-spacing: 0;
    width: 100%;
    min-width: 100%; /* Ensure table always fills container width */
    table-layout: auto;
}

/* Ensure table rows stretch to full width */
#domainTable thead tr,
#domainTable tbody tr {
    width: 100%;
}

/* Ensure thead row has consistent background - apply to both TR and TH */
#domainTable thead tr {
    background-color: #e0f2fe;
}
#domainTable thead th {
    background-color: #e0f2fe !important;
}

/* Apply row background colors directly to table cells for proper stretching */
#domainTable tbody td {
    background-color: inherit;
}

/* Explicit background colors for table cells based on row state */
tr.bg-green-100 > td { background-color: #dcfce7 !important; } /* green-100 */
tr.bg-green-200 > td { background-color: #bbf7d0 !important; } /* green-200 */
tr.bg-red-100 > td { background-color: #fee2e2 !important; } /* red-100 */
tr.bg-amber-100 > td { background-color: #fef3c7 !important; } /* amber-100 */
tr.bg-gray-50 > td { background-color: #f9fafb !important; } /* gray-50 */
tr.newly-available > td {
    background-color: #bbf7d0 !important; /* green-200 brighter */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(34, 197, 94, 0.15) 10px,
        rgba(34, 197, 94, 0.15) 20px
    ) !important;
}
tr.pending-deletion > td { background-color: #fecaca !important; } /* red-200 */
th, td {
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 16px; /* Padded view default */
    text-align: left;
    vertical-align: middle;
    transition: padding 0.2s ease-in-out;
}

/* Domain name column - allow it to stretch to fill available space */
.col-domainName {
    white-space: nowrap;
    min-width: 180px; /* Ensure minimum space for domain names */
    /* No max-width - let it expand to fill remaining space when columns are hidden */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... only for extremely long domains (>600px naturally) */
}

/* Only allow wrapping for extremely long domains that exceed reasonable limits */
.col-domainName.force-wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-overflow: unset;
}

/* On mobile, be more flexible with wrapping */
@media screen and (max-width: 768px) {
    .col-domainName {
        max-width: 250px;
        white-space: normal;
        word-break: break-word; /* Better word breaking on mobile */
    }
}
td.notes-cell {
    display: flex;
    align-items: center;
}
th {
    background-color: #e0f2fe; /* Slightly deeper light blue for better contrast */
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    user-select: none;
    position: relative;
}
th > div {
    display: flex;
    align-items: center;
}
th .sort-icon {
    display: inline-block;
    margin-left: 8px;
    opacity: 0.5;
    transition: opacity 0.2s;
}
th.sorted .sort-icon {
    opacity: 1;
}
tr.selected {
    background-color: #e0f2fe;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}
.modal-content {
    background-color: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 500px;
}
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 40;
    border-radius: 0.5rem; /* Match parent rounding */
}
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #0ea5e9;
    animation: spin 1s ease infinite;
}
.row-spinner {
    border: 2px solid rgba(0, 0, 0, 0.1);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border-left-color: #3b82f6;
    animation: spin 1s ease infinite;
    display: inline-block;
}
.button-spinner {
    border: 2px solid rgba(255, 255, 255, 0.4);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border-left-color: #ffffff;
    animation: spin 1s ease infinite;
    display: inline-block;
}
.spinner-small {
    border: 2px solid rgba(107, 114, 128, 0.2);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-left-color: #6b7280;
    animation: spin 1s ease infinite;
    display: inline-block;
}
#table-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(224, 242, 254, 0.4); /* sky-100 at 40% opacity */
    z-index: 20;
    border-radius: 0.5rem;
    pointer-events: none; /* visual-only overlay; don't block interactions */
}
/* Make the empty-table overlay background click-through so it doesn't block controls */
#emptyTableOverlay { pointer-events: none; }
#emptyTableOverlay > * { pointer-events: auto; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Consolidated tooltip style */
.dc-tooltip {
    position: absolute;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
    padding: 8px;
    border-radius: 6px;
    font-size: 9pt;
    max-width: 300px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    word-wrap: break-word;
}
textarea.note-input {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.05);
    width: 100%;
    height: 38px; /* Padded view default */
    padding: 8px; /* Adjusted padding for vertical centering */
    resize: none;
    line-height: 1.5; /* Ensure consistent line height */
    transition: height 0.2s ease-in-out, padding 0.2s ease-in-out;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.75rem; /* 12px */
}
textarea.note-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}
.controls-disabled button, .controls-disabled input, .controls-disabled label, .controls-disabled textarea {
    cursor: not-allowed !important;
    opacity: 0.6;
}
/* Styles for Compact View */
.view-compact th, .view-compact td {
    padding-top: 1px;
    padding-bottom: 1px;
}
.view-compact .note-input {
    height: 28px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.view-compact .rank-input {
    padding-top: 2px;
    padding-bottom: 2px;
}
.view-compact td.notes-cell {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Hide default number input arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    /* COSMETIC ANIMATION SETTING: This controls hiding browser default arrows on number inputs.
       This setting should NEVER be removed - it only affects cosmetic styling, not functionality. */
    appearance: textfield; /* Modern standard property */
    -moz-appearance: textfield; /* Firefox fallback */
}

.rank-input-container {
    display: flex;
    align-items: center;
}
.rank-arrows-container {
    display: flex;
    flex-direction: column;
    margin-left: 2px;
}
.rank-arrow {
    cursor: pointer;
    user-select: none;
    padding: 2px 4px;
    color: #6b7280; /* gray-500 */
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reduce gap between star and rank columns */
.col-starred {
    padding-right: 8px !important;
}
.col-rank {
    padding-left: 8px !important;
}
.rank-arrow:hover {
    color: #1d4ed8; /* blue-700 */
}
.rank-arrow.flash-green {
    color: #16a34a !important;
}
.rank-arrow.flash-red {
    color: #dc2626 !important;
}

/* Drop Chance Bar Styles */
.drop-chance-bar {
    position: relative;
    background-color: #e5e7eb; /* gray-200 */
    width: 80px;
    min-width: 80px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    border-radius: 3px;
    overflow: hidden;
    margin: 0;
}
.drop-chance-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
.drop-chance-bar-text {
    position: relative;
    z-index: 2;
}

/* Left align Drop Chance and Est Price columns */
td.col-dropChance, td.col-estPrice {
    text-align: left !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
th.col-dropChance > div, th.col-estPrice > div {
    justify-content: flex-start;
    font-size: 0.875rem;
    white-space: nowrap;
}
th.col-dropChance, th.col-estPrice {
    min-width: 100px;
}

/* Star column styles */
.star-btn {
    cursor: pointer;
    transition: color 0.2s;
}
.star-btn.starred {
    color: #fbbf24; /* yellow-400 */
}
.star-btn:not(.starred) {
    color: #9ca3af; /* gray-400 */
}
.star-btn:hover {
    color: #f59e0b; /* yellow-500 */
}

/* Column width constraints for better scaling */
.col-starred {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
.col-rank {
    width: 80px;
    min-width: 70px;
}
.col-available {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.col-expirationDate {
    width: 140px;
    min-width: 120px;
}
.col-daysRemaining {
    width: 130px;
    min-width: 110px;
}
.col-age {
    width: 90px;
    min-width: 80px;
}
.col-buy {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.col-actions {
    width: 110px; /* Reduced from 120px */
    min-width: 110px;
    max-width: 110px;
    padding-right: 1.25rem !important; /* Extra right padding to prevent icons from touching edge */
}
/* Notes column is flexible */
.col-notes {
    min-width: 120px;
}

/* Styles for Hiding Columns */
.hide-col-starred .col-starred,
.hide-col-rank .col-rank,
.hide-col-available .col-available,
.hide-col-expirationDate .col-expirationDate,
.hide-col-daysRemaining .col-daysRemaining,
.hide-col-age .col-age,
.hide-col-dropChance .col-dropChance,
.hide-col-estPrice .col-estPrice,
.hide-col-notes .col-notes,
.hide-col-buy .col-buy,
.hide-col-actions .col-actions {
    display: none !important;
}
/* Style for FAQ answer text */
.faq-answer {
     font-size: 0.875rem; /* Equivalent to text-sm */
     line-height: 1.25rem;
}
.footer-gradient-bg {
    background-image: radial-gradient(circle at 50% -20%, rgba(30, 64, 175, 0.25), transparent 70%);
}

/* New user welcome message styles */
.welcome-notice {
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
    border: 1px solid #93c5fd; /* blue-300 */
}

/* Speech bubble styles for new users */
.speech-bubble {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background-color: #fef3c7; /* amber-100 */
    color: #92400e; /* amber-800 */
    border: 2px solid #f59e0b; /* amber-500 */
    border-radius: 12px;
    padding: 8px 32px 8px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10;
    pointer-events: auto; /* allow clicks to dismiss */
    cursor: pointer;
    pointer-events: auto !important; /* ensure clicks register */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%; /* place arrow above the bubble, pointing up */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #f59e0b; /* amber-500; triangle points up toward input */
}

.speech-bubble.show {
    opacity: 1;
}

/* Close X button inside speech bubble */
.speech-bubble .close-x {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    color: #92400e; /* amber-800 */
    line-height: 1;
    padding: 0 4px;
}

.speech-bubble .close-x:hover {
    color: #78350f; /* amber-900 */
}

/* Inline variant of speech bubble for mobile/flow layout */
.speech-bubble-inline {
    position: relative;
    transform: none;
    display: block;
    margin: 8px auto 0 auto;
    white-space: normal;
    max-width: 100%;
    text-align: center;
}
.speech-bubble-inline::after { display: none; }
.speech-bubble-inline .close-x { position: absolute; top: 4px; right: 6px; font-weight: 700; cursor: pointer; }

/* Position the domain input container relatively for absolute positioning of speech bubble */
.domain-input-container {
    position: relative;
}

/* Header action button styles */
.header-button-group {
    overflow: hidden;
}

.header-action-btn {
    position: relative;
    margin: 0 2px;
}

.header-action-btn:hover {
    background: linear-gradient(to bottom, #60a5fa, #3b82f6) !important; /* Lighter blue on hover */
}

.header-action-btn:active {
    transform: scale(0.95);
}

.header-action-btn:first-child {
    margin-left: 0;
}

.header-action-btn:last-child {
    margin-right: 0;
}

/* Ensure Free! badge doesn't interfere with modals */
#pricingBtn .absolute {
    z-index: 40;
}

/* Shake animation for invalid input */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-animation {
    animation: shake 0.5s ease-in-out;
}

/* Custom PayPal Button Style */
.paypal-donate-button {
    background-image: linear-gradient(to bottom, #4ade80, #16a34a); /* from-green-400 to-green-600 */
    color: white;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    border: none;
    border-bottom: 4px solid #15803d; /* border-green-700 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    font-size: 1.125rem; /* text-lg */
    cursor: pointer;
    transition: all 0.15s ease-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.paypal-donate-button:hover {
    background-image: linear-gradient(to bottom, #86efac, #22c55e); /* from-green-300 to-green-500 */
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.4), 0 2px 4px rgba(0,0,0,0.2);
}
.paypal-donate-button:active {
    transform: translateY(2px);
    border-bottom-width: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Add Domain Button Glossy Effect */
.add-btn-glossy {
    position: relative;
    overflow: hidden;
}
.add-btn-glossy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left 0.4s ease;
}
.add-btn-glossy:hover::before {
    left: 130%;
}

/* Continuous Shiny Effect for Attention-Grabbing Buttons */
.attention-shiny {
    position: relative;
    overflow: hidden;
}
.attention-shiny::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: attentionShine 14s ease-in-out infinite;
}

/* Blinking cursor animation */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.blinking-cursor {
    animation: blink 1s infinite;
}

/* Blinking cursor for placeholder */
@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Typing animation for placeholder text */
@keyframes typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

.typewriter-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid transparent;
}

/* Shake animation for create account button */
.animate-shake {
    animation: shake 0.8s ease-in-out;
}

/* Slow shake animation for create account button (every 15 seconds) */
@keyframes slow-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-1px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(1px);
    }
}
.animate-slow-shake {
    animation: slow-shake 1.2s ease-in-out;
}

/* COSMETIC ANIMATION SETTING: Disable purely cosmetic animations when user preference is set.
   This setting should NEVER be removed - it only affects optional visual effects, not functionality. */
.disable-animated-effects .add-btn-glossy::before,
.disable-animated-effects .attention-shiny::before {
    display: none !important;
}

/* Missing Tailwind utility classes */
.bg-blue-100 {
    background-color: #dbeafe;
}
.border-blue-400 {
    border-color: #60a5fa;
}
.text-blue-600 {
    color: #2563eb;
}
.hover\:bg-blue-100:hover {
    background-color: #dbeafe;
}
.hover\:text-blue-600:hover {
    color: #2563eb;
}

@keyframes attentionShine {
    0% { left: -100%; }
    7% { left: 150%; }
    50% { left: 150%; }
    57% { left: -100%; }
    100% { left: -100%; }
}

/* Colorize notes icon when it has content */
.notes-btn.has-note svg {
    color: #2563eb; /* blue-600 */
}

/* Expiration notice styles */
.expiration-notice {
    background-color: #f5f5f4; /* stone-100 - light gray */
    color: #44403c; /* stone-700 */
    border: 1px solid #d6d3d1; /* stone-300 */
}

.expiring-domain-highlight {
    background-color: #fecaca; /* red-200 */
    color: #991b1b; /* red-800 */
    padding: 2px 4px;
    border-radius: 3px;
    display: inline-block;
}

/* Newly Available styles - bright green with diagonal pattern */
.newly-available {
    background-color: #bbf7d0 !important; /* green-200 brighter */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(34, 197, 94, 0.15) 10px,
        rgba(34, 197, 94, 0.15) 20px
    ) !important;
    color: #065f46 !important; /* green-900 */
    font-weight: 600 !important;
}

/* Newly available legend icon with diagonal pattern */
.newly-available-legend {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(34, 197, 94, 0.4) 2px,
        rgba(34, 197, 94, 0.4) 4px
    ) !important;
}

/* Pending deletion styles */
.pending-deletion {
    background-color: #fecaca !important; /* red-200 */
    color: #991b1b !important; /* red-800 */
    border: 3px solid #dc2626 !important; /* red-600 - bold border */
    box-shadow: 0 0 0 2px #fca5a5 !important; /* red-300 - outer glow */
}

/* Clear filters button styles */
.clear-filters-btn {
    background-color: #ffdca2;
    color: #b91c1c;
    border: 1px solid #f59e0b;
}
.clear-filters-btn:hover {
    background-color: #fed7aa;
}

/* New user welcome message styles (defined once above) */

/* Cancel refresh button - gray when disabled */
#cancelRefreshBtn:disabled {
    background-color: #9ca3af !important; /* gray-400 */
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}
#cancelRefreshBtn:disabled:hover {
    background-color: #9ca3af !important; /* prevent hover effect when disabled */
}