/* ==========================================================================
   Card Styles - Borderless with Soft Shadows
   ========================================================================== */

/* Base card override - remove borders, add soft shadows */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
    background-color: var(--bs-white);
}

/* Card hover state for interactive cards */
.card.card-hover:hover,
.card[onclick]:hover,
a.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Card header - subtle background, no border */
.card-header {
    background-color: var(--bs-gray-50);
    border-bottom: none;
    padding: var(--spacing-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Card body with comfortable padding */
.card-body {
    padding: var(--spacing-md);
}

/* Card footer - clean separation */
.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--bs-gray-100);
    padding: var(--spacing-md);
}

/* Recipe cards specific styling */
.recipe-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.recipe-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.recipe-card .card-img-top {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.recipe-card .card-body {
    padding: var(--spacing-md);
}

.recipe-card .card-title {
    font-weight: var(--font-weight-semibold);
    color: var(--bs-gray-800);
    margin-bottom: var(--spacing-sm);
}

/* Health metrics cards */
.metrics-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
}

.metrics-card .card-header {
    background-color: var(--bs-gray-50);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Plate builder cards */
.plate-container .card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Saved plate cards in history */
.saved-plate-card {
    border: none !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.saved-plate-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ==========================================================================
   Table Polish
   ========================================================================== */

.table {
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--bs-gray-100);
}

.table thead th {
    font-weight: var(--font-weight-semibold);
    color: var(--bs-gray-700);
    border-bottom: 2px solid var(--bs-gray-200);
    background-color: var(--bs-gray-50);
}

/* ==========================================================================
   Form Controls Polish
   ========================================================================== */

.form-control {
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--bs-primary-300);
    box-shadow: 0 0 0 3px rgba(254, 98, 17, 0.1);
}

.form-select {
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--radius-md);
}

.form-select:focus {
    border-color: var(--bs-primary-300);
    box-shadow: 0 0 0 3px rgba(254, 98, 17, 0.1);
}

/* ==========================================================================
   Button Polish
   ========================================================================== */

.btn {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

/* Primary button - orange, for main actions */
.btn-primary {
    background-color: var(--bs-primary-500);
    border-color: var(--bs-primary-500);
}

.btn-primary:hover {
    background-color: var(--bs-primary-600);
    border-color: var(--bs-primary-600);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Secondary/outline buttons */
.btn-outline-secondary {
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-600);
}

.btn-outline-secondary:hover {
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-400);
    color: var(--bs-gray-700);
}

/* ==========================================================================
   List Group Polish
   ========================================================================== */

.list-group {
    border-radius: var(--radius-lg);
}

.list-group-item {
    border: none;
    border-bottom: 1px solid var(--bs-gray-100);
    padding: var(--spacing-sm) var(--spacing-md);
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-flush .list-group-item {
    border-radius: 0;
}

/* ==========================================================================
   Badge Polish
   ========================================================================== */

.badge {
    font-weight: var(--font-weight-medium);
    padding: 0.35em 0.65em;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Modal Polish
   ========================================================================== */

.modal-content {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--bs-gray-100);
    padding: var(--spacing-md) var(--spacing-lg);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    border-top: 1px solid var(--bs-gray-100);
    padding: var(--spacing-md) var(--spacing-lg);
}

/* ==========================================================================
   Dropdown Polish  
   ========================================================================== */

.dropdown-menu {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm);
}

.dropdown-item {
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--bs-gray-100);
}