/**
 * Dogs Override CSS - Force clean design over old styles
 * Higher specificity to override existing styles
 * RADICAL VERSION - Remove ALL nested boxes
 */

/* ============================================
   REMOVE ALL NESTED BOXES - RADICAL APPROACH
   ============================================ */

/* Remove outer ancestry-overview box */
.ancestry-overview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove ancestry-fallback box */
.ancestry-fallback {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove fallback-cards-wrapper box */
.fallback-cards-wrapper,
.fallback-cards-wrapper.layout-grid,
.fallback-cards-wrapper.layout-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make main title clean */
.ancestry-overview h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* ============================================
   FORCE REMOVE EXCESSIVE CONTAINERS
   ============================================ */

/* Remove outer container styling */
.stammbaum-profile-modern .stammbaum-container,
.stammbaum-container.stammbaum-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 24px !important;
    max-width: 1400px !important;
}

/* Remove inner box styling */
.fallback-cards-wrapper.layout-grid,
.fallback-cards-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================
   PEDIGREE CARD VIEW - HORIZONTAL LAYOUT
   ============================================ */

/* Ancestry Section - Remove box */
.ancestry-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 48px !important;
}

/* Section Title */
.ancestry-section-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

/* ============================================
   CONTAINER WIDTH FIXES
   ============================================ */

/* Force all containers to use full width */
.stammbaum-container,
.profile-container,
.profile-content,
.tab-content,
.ancestry-overview,
.ancestry-fallback,
.fallback-cards-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* Add proper padding to main containers */
.stammbaum-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.profile-content {
    padding: 40px !important;
}

/* Litter planning containers */
.stammbaum-litter-plan,
.litter-detail-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Responsive padding */
@media (max-width: 1200px) {
    .stammbaum-container,
    .stammbaum-litter-plan,
    .litter-detail-container {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    
    .profile-content {
        padding: 32px !important;
    }
}

@media (max-width: 768px) {
    .stammbaum-container,
    .stammbaum-litter-plan,
    .litter-detail-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .profile-content {
        padding: 24px !important;
    }
}

@media (max-width: 480px) {
    .stammbaum-container,
    .stammbaum-litter-plan,
    .litter-detail-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .profile-content {
        padding: 16px !important;
    }
}

/* Override dogs-modern.css grid */
.profile-content {
    display: block !important;
    grid-template-columns: unset !important;
}

/* ============================================
   OVERVIEW CONTENT-GRID - 3 COLUMNS
   ============================================ */

/* Force 3 columns on desktop */
@media (min-width: 1024px) {
    .profile-content .content-grid,
    #tab-overview .content-grid,
    .tab-content .content-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
    }
}

/* 2 columns on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .profile-content .content-grid,
    #tab-overview .content-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* 1 column on mobile */
@media (max-width: 767px) {
    .profile-content .content-grid,
    #tab-overview .content-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ============================================
   PARENTS - HORIZONTAL 2-COLUMN GRID
   ============================================ */
.parents-detailed {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    width: 100% !important;
    justify-content: space-between !important;
}

.parents-detailed .parent-card-detailed {
    flex: 1 1 calc(50% - 20px) !important;
    min-width: 400px !important;
    max-width: calc(50% - 20px) !important;
}  padding: 0 !important;
    background: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Force override any media query that makes it vertical */
@media (min-width: 769px) {
    .parents-detailed {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .parents-detailed {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }
}

/* ULTRA AGGRESSIVE - Force 2 columns on ALL screen sizes above 600px */
@media (min-width: 600px) {
    .parents-detailed,
    div.parents-detailed,
    .fallback-cards-wrapper .parents-detailed,
    .fallback-cards-wrapper.layout-grid .parents-detailed {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-flow: dense !important;
    }
    
    .parent-card-detailed {
        grid-column: span 1 !important;
    }
}

/* Force on desktop */
@media (min-width: 1200px) {
    .parents-detailed,
    div.parents-detailed {
        grid-template-columns: 1fr 1fr !important;
        gap: 48px !important;
    }
}

/* Parent Cards - Clean Design */
.parent-card-detailed {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

.parent-card-detailed::before,
.parent-card-detailed::after {
    display: none !important;
}

.parent-card-detailed:hover:not(.empty) {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1) !important;
}

.parent-card-detailed.mother {
    border-left: 4px solid #ec4899 !important;
}

.parent-card-detailed.father {
    border-left: 4px solid #3b82f6 !important;
}

.parent-card-detailed.empty {
    opacity: 0.6 !important;
    border-style: dashed !important;
    background: #f8fafc !important;
}

/* Parent Type Badge */
.parent-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}

.parent-card-detailed.mother .parent-type-badge {
    background: #fce7f3 !important;
    color: #be185d !important;
}

.parent-card-detailed.father .parent-type-badge {
    background: #dbeafe !important;
    color: #1e40af !important;
}

/* Parent Image */
.parent-image,
.parent-placeholder {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
    object-fit: cover !important;
    margin: 0 auto 16px !important;
}

.parent-placeholder {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 48px !important;
    color: #94a3b8 !important;
}

.parent-placeholder.empty {
    background: #f8fafc !important;
    color: #cbd5e1 !important;
}

/* Parent Info */
.parent-info {
    text-align: center !important;
}

.parent-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
}

.parent-name.empty {
    color: #94a3b8 !important;
    font-style: italic !important;
}

.parent-reg {
    display: inline-block !important;
    padding: 4px 12px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Monaco', 'Courier New', monospace !important;
    margin-bottom: 8px !important;
}

.parent-breed,
.parent-birth {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

.external-badge-small {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 8px !important;
    box-shadow: none !important;
}

/* ============================================
   GRANDPARENTS - CLEAN LAYOUT
   ============================================ */

.grandparents-detailed {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.grandparents-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.grandparents-group-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.grandparents-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

/* Grandparent Cards */
.grandparent-card-detailed {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-align: center !important;
}

.grandparent-card-detailed::before,
.grandparent-card-detailed::after {
    display: none !important;
}

.grandparent-card-detailed:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1) !important;
}

.grandparent-type {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
}

.grandparent-image,
.grandparent-placeholder {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1) !important;
    object-fit: cover !important;
    margin: 0 auto 12px !important;
}

.grandparent-placeholder {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    color: #94a3b8 !important;
}

.grandparent-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
}

.grandparent-reg,
.grandparent-breed {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 2px 0 !important;
}

/* ============================================
   GREAT-GRANDPARENTS
   ============================================ */

.great-grandparents-detailed {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.great-grandparents-detailed .grandparents-group {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.great-grandparents-detailed .grandparent-card-detailed {
    padding: 12px !important;
}

.great-grandparents-detailed .grandparent-image,
.great-grandparents-detailed .grandparent-placeholder {
    width: 60px !important;
    height: 60px !important;
}

.great-grandparents-detailed .grandparent-name {
    font-size: 13px !important;
}

/* ============================================
   PEDIGREE TABLE VIEW - CLEAN & READABLE
   ============================================ */

/* Table Container */
.pedigree-table-wrapper,
.table-view-container {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
    overflow-x: auto !important;
}

/* Table */
.pedigree-table,
table.pedigree-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

/* Table Header */
.pedigree-table thead th {
    padding: 16px !important;
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #0f172a !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.pedigree-table thead th:first-child {
    border-top-left-radius: 8px !important;
}

.pedigree-table thead th:last-child {
    border-top-right-radius: 8px !important;
}

/* Table Body */
.pedigree-table tbody tr {
    transition: background-color 0.2s ease !important;
}

.pedigree-table tbody tr:hover {
    background: #f8fafc !important;
}

.pedigree-table tbody td {
    padding: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    vertical-align: middle !important;
}

.pedigree-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Lineage Cell */
.lineage-cell {
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

/* Ancestor Cell with Image */
.ancestor-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ancestor-cell-image {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.ancestor-cell-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.ancestor-cell-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ancestor-cell-reg {
    font-size: 12px !important;
    color: #64748b !important;
    font-family: 'Monaco', 'Courier New', monospace !important;
}

.ancestor-cell-breed {
    font-size: 12px !important;
    color: #94a3b8 !important;
}

/* External Tier Badge */
.external-tier-badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ============================================
   TABS - CLEAN DESIGN
   ============================================ */

.pedigree-view-tabs,
.view-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

.pedigree-tab,
.view-tab {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pedigree-tab:hover,
.view-tab:hover {
    background: #f8fafc !important;
    border-color: #2563eb !important;
    color: #0f172a !important;
}

.pedigree-tab.active,
.view-tab.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .parents-detailed {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    
    .grandparents-detailed {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .grandparents-pair {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .stammbaum-container.stammbaum-container {
        padding: 16px !important;
    }
    
    .parents-detailed {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .grandparents-detailed {
        grid-template-columns: 1fr !important;
    }
    
    .grandparents-pair {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .great-grandparents-detailed {
        grid-template-columns: 1fr !important;
    }
    
    .pedigree-table-wrapper,
    .table-view-container {
        padding: 16px !important;
    }
    
    .pedigree-table thead th,
    .pedigree-table tbody td {
        padding: 12px 8px !important;
    }
}

@media (max-width: 480px) {
    .parent-image,
    .parent-placeholder {
        width: 100px !important;
        height: 100px !important;
    }
    
    .grandparent-image,
    .grandparent-placeholder {
        width: 70px !important;
        height: 70px !important;
    }
    
    .pedigree-tab,
    .view-tab {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* Stack table on very small screens */
    .pedigree-table thead {
        display: none !important;
    }
    
    .pedigree-table tbody tr {
        display: block !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        background: #f8fafc !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    .pedigree-table tbody td {
        display: block !important;
        padding: 8px 0 !important;
        border: none !important;
        text-align: left !important;
    }
    
    .pedigree-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #64748b !important;
        margin-bottom: 4px !important;
    }
    
    .ancestor-cell {
        flex-direction: row !important;
    }
}

/* ============================================
   FORCE OVERRIDE SPECIFIC OLD STYLES
   ============================================ */

/* Remove all gradient backgrounds */
.parent-card-detailed,
.grandparent-card-detailed,
.grandparents-group {
    background-image: none !important;
}

/* Remove all radial gradients */
.parent-card-detailed::before,
.parent-card-detailed::after,
.grandparent-card-detailed::before,
.grandparent-card-detailed::after {
    background: none !important;
    display: none !important;
}

/* Simplify all shadows */
.parent-card-detailed,
.grandparent-card-detailed,
.parent-image,
.grandparent-image {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}

/* Remove all fancy borders */
.parent-card-detailed,
.grandparent-card-detailed,
.grandparents-group {
    border: 1px solid #f1f5f9 !important;
}

/* Simplify all border-radius */
.parent-card-detailed {
    border-radius: 16px !important;
}

.grandparent-card-detailed {
    border-radius: 12px !important;
}

/* Remove all transform effects except hover */
.parent-card-detailed,
.grandparent-card-detailed {
    transform: none !important;
}

.parent-card-detailed:hover:not(.empty),
.grandparent-card-detailed:hover {
    transform: translateY(-4px) !important;
}