/**
 * Obsolescence Component - Main CSS
 * @copyright Copyright (C) 2026 Hitachi. All rights reserved.
 * @license   GNU General Public License version 2 or later
 * 
 * Bootstrap 5.x Base Styles
 * This file contains minimal CSS overrides following Bootstrap 5.x conventions.
 * Inline styles are avoided; all customizations are class-based and justified.
 */

/* ==========================================================================
   Component Base Styles
   ========================================================================== */

/* Component containers rely on Bootstrap 5.x spacing utilities */
/* No custom spacing needed - using g-3, g-md-4, mt-*, mb-*, etc. */

/* ==========================================================================
   Minimal Custom Overrides (Justified)
   ========================================================================== */

/**
 * Card hover effect enhancement
 * Justification: Improves UX by providing visual feedback on interactive cards
 */
.com-obsolescence .card:not(.card-no-hover):hover {
    box-shadow: var(--bs-box-shadow-sm);
    transition: box-shadow 0.3s ease-in-out;
}

/**
 * Module image: constrained width on desktop so it sits beside the table
 * Justification: Prevents the image from taking up too much horizontal space
 */
@media (min-width: 768px) {
    .com-obsolescence .obso-overview-module-image {
        max-width: 300px;
    }
}

/* ==========================================================================
    Action Layout Helpers
    ========================================================================== */

.com-obsolescence .obso-action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.com-obsolescence .obso-action-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* ========================================================================== */
/* Drag and Drop Ordering */
/* ========================================================================== */

.com-obsolescence .obso-dnd-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0.75rem;
    cursor: grab;
    user-select: none;
}

.com-obsolescence .obso-dnd-handle:active {
    cursor: grabbing;
}

.com-obsolescence .obso-dnd-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.com-obsolescence .obso-dnd-placeholder {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.4rem;
    background: var(--bs-tertiary-bg);
    min-height: 2.2rem;
    margin: 0.25rem 0;
}

.com-obsolescence .obso-dnd-placeholder[data-dnd-placeholder="module"] {
    border: 1px solid var(--bs-accordion-border-color);
    border-radius: var(--bs-accordion-border-radius);
    background: var(--bs-accordion-bg);
    margin: 0;
    min-height: 0;
    box-sizing: border-box;
}

.com-obsolescence .obso-dnd-placeholder td {
    background: var(--bs-tertiary-bg);
    height: 2.2rem;
}



body.obso-dnd-dragging-module .obso-dnd-item-list {
    opacity: 0.6;
    cursor: not-allowed;
}

body.obso-dnd-dragging-item .obso-dnd-module-list {
    opacity: 0.6;
    cursor: not-allowed;
}

body.obso-dnd-dragging-module #obso-dnd-alerts,
body.obso-dnd-dragging-item #obso-dnd-alerts {
    display: none;
}

body.obso-dnd-invalid-drop .obso-dnd-module-list,
body.obso-dnd-invalid-drop .obso-dnd-item-list {
    outline: 2px solid var(--bs-danger);
    outline-offset: 2px;
}

/* Joomla toolbar buttons (Save & Close / Cancel) */
.com_obsolescence .subhead .btn,
.com-obsolescence .subhead .btn {
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    box-shadow: var(--bs-box-shadow-sm);
}

.com_obsolescence .subhead .btn-success,
.com-obsolescence .subhead .btn-success {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.com_obsolescence .subhead .btn-danger,
.com-obsolescence .subhead .btn-danger {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* ==========================================================================
   Metadata Panel Styling
   ========================================================================== */

.com-obsolescence .obso-meta-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow);
    overflow: hidden;
}

.com-obsolescence .obso-meta-card .card-header {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.com-obsolescence .obso-meta-list {
    display: grid;
    gap: 0.75rem;
}

.com-obsolescence .obso-meta-item {
    display: grid;
    gap: 0.2rem;
}

.com-obsolescence .obso-meta-label,
.com-obsolescence .obso-meta-card .control-label label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
}

.com-obsolescence .obso-meta-value,
.com-obsolescence .obso-meta-card .form-control[readonly],
.com-obsolescence .obso-meta-card .form-control[disabled] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.4rem 0.6rem;
    font-weight: 600;
}

.com-obsolescence-overview .obso-overview-modules .accordion-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.com-obsolescence-overview .obso-overview-modules .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-color: var(--bs-accordion-border-color);
}

.com-obsolescence-overview .obso-overview-modules .accordion-button:focus {
    box-shadow: none;
    border-color: var(--bs-accordion-border-color);
}

.com-obsolescence-overview .obso-overview-module-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-obsolescence-overview .obso-overview-modules .badge {
    flex-shrink: 0;
}

.com-obsolescence-overview .obso-overview-module-table {
    width: 100%;
    min-width: 0;
}

.com-obsolescence-overview .obso-overview-module-table th {
    white-space: nowrap;
}

.com-obsolescence-overview .obso-overview-module-table td {
    vertical-align: top;
    word-break: break-word;
}

.com-obsolescence-overview .obso-overview-module-table td.text-center,
.com-obsolescence-overview .obso-overview-module-table th[style*="width:5%"],
.com-obsolescence-overview .obso-overview-module-table th[style*="width:7%"] {
    white-space: nowrap;
}

.com-obsolescence-overview .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.5rem;
}

.com-obsolescence-overview .obso-items-table {
    min-width: 980px;
}

.com-obsolescence-overview .obso-items-table td,
.com-obsolescence-overview .obso-items-table th {
    vertical-align: top;
}

.com-obsolescence-overview .obso-items-table .obso-col-number {
    width: 11%;
}

.com-obsolescence-overview .obso-items-table .obso-col-description-icon,
.com-obsolescence-overview .obso-items-table .obso-col-pcn-icon {
    width: 44px;
    min-width: 44px;
    text-align: center;
}

.com-obsolescence-overview .obso-items-table .obso-col-statuses {
    width: 7%;
}

.com-obsolescence-overview .obso-items-table .obso-col-replaced {
    width: 22%;
}

.com-obsolescence-overview .obso-items-table td:first-child {
    white-space: nowrap;
    min-width: 112px;
}

.com-obsolescence-overview .obso-items-table .obso-item-status-cell {
    min-width: 64px;
}

.com-obsolescence-overview .obso-items-table .obso-item-name-cell {
    min-width: 180px;
    white-space: nowrap;
}

.com-obsolescence-overview .obso-items-table .obso-item-replaced-cell,
.com-obsolescence-overview .obso-items-table .obso-item-replacement-for-cell {
    min-width: 220px;
    white-space: nowrap;
}

.com-obsolescence-overview .obso-items-table .obso-item-pcn-cell,
.com-obsolescence-overview .obso-items-table .obso-item-description-cell {
    min-width: 44px;
    width: 44px;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.com-obsolescence-overview .obso-items-table .obso-item-pcn-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
}

.com-obsolescence-overview .obso-items-table .obso-item-pcn-link::after {
    content: none !important;
    display: none !important;
}

.com-obsolescence-overview .obso-items-table a.obso-item-pcn-link[target="_blank"]::before,
.com-obsolescence-overview .obso-items-table a.obso-item-pcn-link[target="_blank"]::after {
    content: none !important;
    display: none !important;
}

.com-obsolescence-overview .obso-impact-icon,
.com-obsolescence-overview .obso-pcn-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: none !important;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    vertical-align: middle;
}

.com-obsolescence-overview .obso-items-table .obso-impact-icon,
.com-obsolescence-overview .obso-items-table .obso-pcn-icon {
    display: inline-block;
    vertical-align: middle;
}

.com-obsolescence-overview .obso-items-table .obso-item-pcn-cell,
.com-obsolescence-overview .obso-items-table .obso-item-description-cell {
    overflow: visible;
    line-height: 1;
}

@media (max-width: 1199.98px) {
    .com-obsolescence-overview .obso-items-table {
        min-width: 920px;
    }
}

.com-obsolescence-overview .obso-status-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: default;
    outline: none;
    overflow: visible;
    vertical-align: middle;
}

.com-obsolescence-overview .obso-status-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
}

.com-obsolescence-overview .obso-status-inline-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.com-obsolescence-overview .obso-description-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
    outline: none;
    overflow: visible;
    vertical-align: middle;
}

.com-obsolescence-overview .obso-overview-module-image {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 120px;
    margin: 0;
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
    padding: 0.25rem;
    object-fit: contain;
}

.com-obsolescence-overview .obso-overview-top-actions {
    width: 100%;
}

.com-obsolescence-overview .obso-overview-list {
    margin: 0;
    padding: 0;
    padding-inline-start: 0 !important;
    list-style: none;
}

.com-obsolescence-overview .obso-overview-list-card .card-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.com-obsolescence-overview .obso-overview-list-card .card-body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.com-obsolescence-overview .obso-overview-list-item {
    padding: 0.25rem 0;
}

.com-obsolescence-overview .obso-overview-list-item + .obso-overview-list-item {
    border-top: 1px solid var(--bs-border-color-translucent);
    margin-top: 0.35rem;
    padding-top: 0.6rem;
}

.com-obsolescence-overview .obso-overview-list-meta-cell {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

.com-obsolescence-overview .obso-overview-list-meta-cell small {
    margin-top: 0.2rem;
    font-size: 0.86rem;
}

.com-obsolescence-overview .obso-overview-list-action-cell {
    text-align: right;
    padding-right: 0.1rem;
}

.com-obsolescence-overview .obso-overview-list-item .btn {
    min-width: 5.25rem;
}

.com-obsolescence-overview .obso-overview-top-action {
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .com-obsolescence-overview .obso-overview-module-image {
        max-width: 220px;
        height: 110px;
    }
}

@media (max-width: 575.98px) {
    .com-obsolescence-overview .obso-overview-top-actions {
        justify-content: stretch;
    }

    .com-obsolescence-overview .obso-overview-top-action {
        flex: 1 1 calc(50% - 0.25rem);
        text-align: center;
    }

    .com-obsolescence-overview .obso-overview-top-action-back {
        flex-basis: 100%;
    }
}

/**
 * Icon sizing consistency
 * Justification: Ensures consistent icon display across all components
 * Uses Bootstrap's fs-* utility classes as base
 */
/* Icons use Bootstrap utility classes (fs-1, fs-2, etc.) in templates */
/* No override needed */

/**
 * Page header bottom border consistency
 * Justification: Provides visual separation using Bootstrap's border utilities
 */
/* Uses Bootstrap .border-bottom utility in templates */
/* No override needed */

/**
 * Responsive table enhancement for mobile
 * Justification: Improves readability on small screens while maintaining Bootstrap table structure
 */
@media (max-width: 767.98px) {
    /* Bootstrap handles responsive tables natively */
    /* Using d-none d-md-table-cell classes in templates */

    .com-obsolescence-overview .obso-overview-list-item {
        padding: 0.2rem 0;
    }

    .com-obsolescence-overview .obso-overview-list-item .btn {
        min-width: 5rem;
    }

    .com-obsolescence-overview .obso-overview-module-table {
        min-width: 0;
    }

    .com-obsolescence-overview .obso-overview-module-image {
        max-width: 180px;
        height: 96px;
    }

    /* Steckbrief layout: transform table rows into stacked cards on mobile */
    .com-obsolescence-overview .obso-items-table {
        min-width: 0;
    }

    .com-obsolescence-overview .obso-items-table thead {
        display: none;
    }

    .com-obsolescence-overview .obso-items-table tbody tr {
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem;
        margin-bottom: 0.75rem;
        background-color: transparent;
    }

    .com-obsolescence-overview .obso-items-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .com-obsolescence-overview .obso-items-table td {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        border-top: none;
        border-bottom: 1px solid var(--bs-border-color-translucent);
        white-space: normal !important;
        min-width: 0 !important;
        padding: 0.4rem 0.6rem;
    }

    .com-obsolescence-overview .obso-items-table td:last-child {
        border-bottom: none;
    }

    .com-obsolescence-overview .obso-items-table td::before {
        content: attr(data-label);
        font-weight: 600;
        min-width: 7.5rem;
        flex-shrink: 0;
        color: var(--bs-secondary-color);
        font-size: 0.875em;
        padding-top: 0.1rem;
    }
}

/* ==========================================================================
   Print Styles (Optional Enhancement)
   ========================================================================== */

@media print {
    .com-obsolescence .btn-toolbar,
    .com-obsolescence .btn-group,
    .com-obsolescence .breadcrumb {
        display: none;
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/**
 * Focus indicators for keyboard navigation
 * Justification: Improves accessibility compliance
 */
/* Bootstrap 5.x provides excellent focus indicators by default */
/* No override needed */

/**
 * High contrast mode support
 * Justification: Ensures component works in Windows High Contrast Mode
 */
@media (prefers-contrast: high) {
    .com-obsolescence .card {
        border-width: 2px;
    }
}

/* ==========================================================================
   Legacy Support (Remove when no longer needed)
   ========================================================================== */

/**
 * Deprecated: .obsolescence-item class
 * Migration: Use Bootstrap .card component instead
 * Will be removed in future version
 */
.com-obsolescence .obsolescence-item {
    /* Deprecated - use .card instead */
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
}

.com-obsolescence .obso-card-header {
    padding-right: 0;
}

.com-obsolescence .obso-card-actions-inline {
    margin-right: -1rem;
}