/* ===================================================
   CARD STYLING - CENTRALIZED CARD COMPONENT STYLES
   ===================================================
   
   This file provides centralized card styling to ensure
   consistent appearance across the application.
*/

/* Import centralized systems */
@import url("spacing.fcb7e2c7ab0a.css");
@import url("borders.d5d3bb34e628.css");
@import url("shadows.2216235621bb.css");
@import url("animation_transition.7613137d12c6.css");
@import url("layout_constraints.92377ed79df6.css");

/* Content containers - controls overall width */
.content-container,
.tab-content {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-4);
}

/* Base card styling */
.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  width: 100%;
}

/* Card header styling */
.card-header {
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.card-header h5 {
  margin-bottom: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
}

/* Card body styling */
.card-body {
  padding: var(--space-4);
}

/* Card content layout */
.card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-3);
}

/* Clickable elements */
.clickable {
  cursor: pointer;
}

.clickable:hover {
  background-color: var(--bg-light);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content-container,
  .tab-content {
    max-width: 100%;
  }
  
  .card-body {
    padding: var(--space-3);
  }
}