/* ========================================
   FD Legacy Reset - Prevent Legacy Styles from Interfering
   This file resets legacy styles that might conflict with FD system
   ======================================== */

/* ========================================
   Reset Legacy DataTable Styles
   ======================================== */

/* Override legacy custom_dataTable.css styles — standalone wrappers only */
.fd-skin .fd-datatable-wrapper .dataTables_wrapper {
    background: var(--bg-primary);
    border-radius: var(--control-track-radius);
    box-shadow: var(--shadow-01);
    overflow: hidden;
    border: 1px solid var(--border-primary);
    margin: var(--space-md) 0;
}

/* Pattern A list card — flush table stack (card owns --radius-card) */
.fd-skin .fd-list-card .fd-datatable-wrapper,
.fd-skin .fd-list-card .fd-datatable-wrapper .dataTables_wrapper,
.fd-skin .fd-list-card .table-container {
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 0;
    overflow: visible;
    background: transparent;
}

/* Override legacy table styles */
.fd-skin.fd-datatable-wrapper table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--bg-primary);
    font-family: var(--font-family-secondary);
}

/* Override legacy header styles */
.fd-skin.fd-datatable-wrapper table thead th {
    background: var(--interactive-primary);
    color: var(--text-inverse);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-md) var(--space-sm);
    border: none;
    text-align: center;
    font-size: var(--font-size-sm);
    position: relative;
}

/* Override legacy body styles */
.fd-skin.fd-datatable-wrapper table tbody td {
    padding: var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--border-secondary);
    text-align: left;
    vertical-align: middle;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Override legacy row styles */
.fd-skin.fd-datatable-wrapper table tbody tr:nth-child(even) {
    background: var(--table-row-stripe);
}

.fd-skin.fd-datatable-wrapper table tbody tr:nth-child(odd) {
    background: var(--table-row-base);
}

.fd-skin.fd-datatable-wrapper table tbody tr:hover {
    background: var(--table-row-hover);
}

/* Override legacy button styles */
.fd-skin.fd-datatable-wrapper .dt-buttons .dt-button {
    background: var(--interactive-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-left: var(--space-sm);
    transition: all var(--transition-fast);
    font-family: var(--font-family-secondary);
    cursor: pointer;
}

/* Pagination: override Bootstrap default blue (#2780e3) with FD blue */
.fd-skin .pagination {
  --bs-pagination-color: var(--interactive-primary);
  --bs-pagination-hover-color: var(--interactive-primary-hover);
  --bs-pagination-focus-color: var(--interactive-primary-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(63, 169, 245, 0.25);
  --bs-pagination-active-bg: var(--interactive-primary);
  --bs-pagination-active-border-color: var(--interactive-primary);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: var(--bg-secondary);
  --bs-pagination-disabled-border-color: var(--border-secondary);
  gap: var(--space-sm, 0.5rem);
}

/* Pagination: dim disabled Previous/Next (subtle, still visible) */
.fd-skin .pagination .page-item.disabled .page-link {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Pagination: capsule (pill) for Previous/Next, round (circular) for page numbers */
.fd-skin .pagination .page-item.previous .page-link,
.fd-skin .pagination .page-item.next .page-link {
  border-radius: var(--radius-full, 9999px);
}
.fd-skin .pagination .page-item:not(.previous):not(.next) .page-link {
  border-radius: 50%;
  min-width: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* DataTables pagination - legacy capsule styling (excludes FD footer — see fd-datatable-controls.css) */
.fd-skin .dataTables_paginate:not(.fd-pagination-nav) .paginate_button.previous .page-link,
.fd-skin .dataTables_paginate:not(.fd-pagination-nav) .paginate_button.next .page-link {
  border-radius: var(--radius-full, 9999px) !important;
}
.fd-skin .dataTables_paginate:not(.fd-pagination-nav) .paginate_button:not(.previous):not(.next) .page-link {
  border-radius: 50% !important;
  min-width: 2.25rem !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* DataTables pagination: spacing between buttons (gap on ul.pagination) */
.fd-skin .dataTables_paginate .pagination {
  gap: var(--space-sm, 0.5rem) !important;
}

/* DataTables pagination: dim disabled Previous/Next (subtle, still visible) */
.fd-skin .dataTables_paginate .paginate_button.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Override legacy search styles */
.fd-skin.fd-datatable-wrapper .dataTables_filter input {
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    width: 250px;
    font-family: var(--font-family-secondary);
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Override legacy length selector styles */
.fd-skin.fd-datatable-wrapper .dataTables_length select {
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--font-size-sm);
    background: var(--bg-primary);
    margin-right: var(--space-md);
    font-family: var(--font-family-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

/* ========================================
   Reset Legacy Component Styles
   ======================================== */

/* Override legacy card styles — exclude F5 tiles, Pattern A list shells, form/template shells, nested inset panels */
.fd-skin .fd-card:not(.fd-card-tile):not(.fd-list-card):not(.fd-form-page-shell-card):not(.fd-template-summary-card):not(.fd-order-add-shell-card):not(.fd-order-preview-card):not(.fd-tips-card):not(.fd-filter-card):not(.fd-modal-content):not(.fd-card-nested) {
    background: var(--bg-primary);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-01);
    overflow: hidden;
    transition: all var(--transition-fast);
}

/* Pattern A list card — Pulse outer shell owns --radius-card */
.fd-skin .fd-card.fd-card-borderless.fd-card-zoned.fd-list-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Override legacy button styles — align with canonical .fd-btn (PULSE-05 / backlog).
   Do not set border shorthand here — it loads after fd-layout and wipes .fd-btn-outline / .fd-btn-primary borders. */
.fd-skin .fd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-compact);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

/* Form control chrome → fd-forms.css (loads after this file). Do not add .form-control / .form-select here. */

/* ========================================
   Reset Legacy Layout Styles
   ======================================== */

/* Override legacy container styles */
.fd-skin .container,
.fd-skin .container-fluid {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Override legacy row styles */
.fd-skin .row {
    margin-left: calc(var(--space-sm) * -1);
    margin-right: calc(var(--space-sm) * -1);
}

/* Override legacy column styles */
.fd-skin [class*="col-"] {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}

/* ========================================
   Reset Legacy Typography Styles
   ======================================== */

/* Override legacy heading styles */
.fd-skin h1, .fd-skin h2, .fd-skin h3, .fd-skin h4:not(.fd-metric-title), .fd-skin h5, .fd-skin h6 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

/* Override legacy paragraph styles */
.fd-skin p {
    font-family: var(--font-family-secondary);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

/* Override legacy link styles */
.fd-skin a {
    color: var(--interactive-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Exclude buttons and pagination buttons from link hover styles - they have their own hover states */
.fd-skin a:hover:not(.fd-btn):not(.paginate_button a) {
    color: var(--interactive-primary-hover);
}

/* ========================================
   Reset Legacy Utility Styles
   ======================================== */

/* Override legacy margin utilities */
.fd-skin .m-0 { margin: 0; }
.fd-skin .m-1 { margin: var(--space-xs); }
.fd-skin .m-2 { margin: var(--space-sm); }
.fd-skin .m-3 { margin: var(--space-md); }
.fd-skin .m-4 { margin: var(--space-lg); }
.fd-skin .m-5 { margin: var(--space-xl); }

/* Override legacy padding utilities */
.fd-skin .p-0 { padding: 0; }
.fd-skin .p-1 { padding: var(--space-xs); }
.fd-skin .p-2 { padding: var(--space-sm); }
.fd-skin .p-3 { padding: var(--space-md); }
.fd-skin .p-4 { padding: var(--space-lg); }
.fd-skin .p-5 { padding: var(--space-xl); }

/* Override legacy text utilities */
.fd-skin .text-center { text-align: center; }
.fd-skin .text-left { text-align: left; }
.fd-skin .text-right { text-align: right; }

/* Override legacy display utilities */
.fd-skin .d-none { display: none; }
.fd-skin .d-block { display: block; }
.fd-skin .d-flex { display: flex; }
.fd-skin .d-grid { display: grid; }

/* ========================================
   Reset Legacy Animation Styles
   ======================================== */

/* Override legacy animation styles — scoped only; no global `*` transitions */
.fd-skin .fd-card:not(.fd-list-card):not(.fd-card-tile) {
  transition: var(--transition-surface);
}

.fd-skin .fd-card:not(.fd-list-card):not(.fd-card-tile):not(.fd-form-page-shell-card):not(.fd-template-summary-card):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-02);
}

/* ========================================
   Reset Legacy Responsive Styles
   ======================================== */

@media (max-width: 768px) {
    .fd-skin.fd-datatable-wrapper .dataTables_filter input {
        width: 200px;
    }
    
    .fd-skin.fd-datatable-wrapper .dataTables_length,
    .fd-skin.fd-datatable-wrapper .dataTables_filter,
    .fd-skin.fd-datatable-wrapper .dt-buttons {
        margin: var(--space-sm);
    }
    
    .fd-skin.fd-datatable-wrapper table thead th,
    .fd-skin.fd-datatable-wrapper table tbody td {
        padding: var(--space-sm) var(--space-xs);
        font-size: var(--font-size-xs);
    }
}