/* ============================================================================ */
/* ACT Platform Shared Components - Common Component Styles                    */
/* ============================================================================ */

/* Performance Optimizations */
/* CSS Containment for isolated components */
.page-container,
.card-standard,
.page-toolbar,
.stat-badge,
.modal-content {
    contain: layout style paint;
}

/* ===== Page Containers ===== */
.page-container {
    max-width: var(--layout-container-max-width);
    margin: 0 auto;
    padding: var(--layout-container-padding-compact);
}

/* ===== Page Headers ===== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--header-margin-bottom);
    padding: var(--header-padding);
    background: var(--header-gradient);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-md);
    gap: var(--spacing-base);
}

.page-header .header-content {
    flex: 1;
}

.page-header .header-actions {
    display: flex;
    gap: var(--spacing-base);
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.page-header .page-title {
    font-size: var(--header-title-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

.page-header .page-subtitle {
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    font-size: var(--header-subtitle-size);
    line-height: var(--line-height-tight);
}

/* ===== Cards ===== */
.card-standard {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: var(--spacing-xl);
}

.card-standard .card-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card-standard .card-header h2 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    line-height: var(--line-height-tight);
}

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

.card-compact {
    padding: var(--card-padding-compact);
}

/* ===== Alerts ===== */
.alert-standard {
    border-radius: var(--alert-border-radius);
    border: none;
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    animation: slideIn var(--transition-slow) ease-out;
    padding: var(--alert-padding);
}

.alert-standard i {
    flex-shrink: 0;
}

.alert-success-standard {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-left: 4px solid var(--color-success);
}

.alert-danger-standard {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border-left: 4px solid var(--color-danger);
}

.alert-warning-standard {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border-left: 4px solid var(--color-warning);
}

.alert-info-standard {
    background-color: var(--color-info-bg);
    color: var(--color-info);
    border-left: 4px solid var(--color-info);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Badges ===== */
.badge-standard {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--badge-padding);
    background: var(--color-bg-tertiary);
    border-radius: var(--badge-border-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.badge-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* Quota Badge Specific */
.quota-badge {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-base);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-base);
}

.quota-badge:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.quota-badge.quota-exceeded {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(220, 38, 38, 1);
    animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ===== Buttons (Enhancement) ===== */
.btn-standard {
    padding: var(--btn-padding-base);
    font-size: var(--btn-font-size-base);
    border-radius: var(--radius-base);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
}

.btn-sm-standard {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-size-sm);
}

.btn-lg-standard {
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-size-lg);
}

/* ===== Empty States ===== */
.empty-state {
    text-align: center;
    padding: var(--spacing-4xl) var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.empty-state-icon {
    font-size: var(--font-size-5xl);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.empty-state-description {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-xl);
}

/* ===== Loading States ===== */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    color: var(--color-text-tertiary);
}

.loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--spacing-base);
}

/* ===== Toolbars ===== */
.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-base);
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    gap: var(--spacing-base);
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    width: 100%;
}

.filter-group {
    display: flex;
    gap: var(--spacing-base);
}

/* ===== Stats ===== */
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-base);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* ===== Tables (Compact) ===== */
.table-compact {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
}

.table-compact th,
.table-compact td {
    padding: var(--table-cell-padding-compact);
    line-height: var(--line-height-tight);
}

.table-compact th {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Extra compact table for dense data */
.table-extra-compact {
    font-size: var(--font-size-xs);
}

.table-extra-compact th,
.table-extra-compact td {
    padding: var(--spacing-xs) var(--spacing-sm);
    line-height: var(--line-height-tight);
}

/* ===== Utility Classes ===== */
.text-compact {
    line-height: var(--line-height-tight);
}

.gap-compact {
    gap: var(--spacing-sm);
}

.mb-compact {
    margin-bottom: var(--spacing-base);
}

.p-compact {
    padding: var(--spacing-sm);
}

.mt-compact {
    margin-top: var(--spacing-base);
}

.py-compact {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.px-compact {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* ===== Form Optimizations ===== */
.form-compact .form-group,
.form-compact .form-floating,
.form-compact .mb-3 {
    margin-bottom: var(--spacing-base);
}

.form-compact label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-xs);
}

.form-compact .form-control,
.form-compact .form-select {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.form-compact .btn {
    padding: var(--spacing-sm) var(--spacing-base);
    font-size: var(--font-size-sm);
}

/* Tighter row/column spacing */
.row-compact {
    row-gap: var(--spacing-base);
}

.col-compact {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
}

/* ============================================================================ */
/* 1024px Viewport Optimization - Moderate component spacing                  */
/* ============================================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
    .page-container {
        max-width: var(--layout-container-max-width);
        margin: 0 auto;
        padding: var(--layout-container-padding);
    }

    .page-header {
        margin-bottom: var(--header-margin-bottom);
        padding: var(--header-padding);
        gap: var(--spacing-sm);
    }

    .card-standard {
        margin-bottom: var(--spacing-lg);
    }

    .card-standard .card-header {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

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

    .alert-standard {
        margin-bottom: var(--spacing-lg);
    }

    .page-toolbar {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .toolbar-controls {
        gap: var(--spacing-lg);
    }

    .filter-group {
        gap: var(--spacing-sm);
    }

    .stat-card {
        gap: var(--spacing-lg);
    }
}

/* ============================================================================ */
/* 1280px Viewport Optimization - Moderate component spacing                  */
/* ============================================================================ */
@media (min-width: 1280px) and (max-width: 1399px) {
    .page-container {
        max-width: var(--layout-container-max-width);
        margin: 0 auto;
        padding: var(--layout-container-padding);
    }

    .page-header {
        margin-bottom: var(--header-margin-bottom);
        padding: var(--header-padding);
        gap: var(--spacing-sm);
    }

    .card-standard {
        margin-bottom: var(--spacing-lg);
    }

    .card-standard .card-header {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

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

    .alert-standard {
        margin-bottom: var(--spacing-lg);
    }

    .page-toolbar {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .toolbar-controls {
        gap: var(--spacing-lg);
    }

    .filter-group {
        gap: var(--spacing-sm);
    }

    .stat-card {
        gap: var(--spacing-lg);
    }
}

/* ============================================================================ */
/* 1400px Viewport Optimization - Compact component spacing                   */
/* ============================================================================ */
@media (min-width: 1400px) and (max-width: 1600px) {
    .page-container {
        max-width: var(--layout-container-max-width);
        margin: 0 auto;
        padding: var(--layout-container-padding);
    }

    .page-header {
        margin-bottom: var(--header-margin-bottom);
        padding: var(--header-padding);
        gap: var(--spacing-sm);
    }

    .card-standard {
        margin-bottom: var(--spacing-lg);
    }

    .card-standard .card-header {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

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

    .alert-standard {
        margin-bottom: var(--spacing-lg);
    }

    .page-toolbar {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .toolbar-controls {
        gap: var(--spacing-lg);
    }

    .filter-group {
        gap: var(--spacing-sm);
    }

    .stat-card {
        gap: var(--spacing-lg);
    }
}
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all var(--transition-base);
}

.status-active {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-active i {
    font-size: 0.6rem;
    animation: pulse 2s infinite;
}

.status-inactive {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== Tags ===== */
.tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all var(--transition-base);
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ===== Content Section Enhancements ===== */
/* Improve text content readability and visual hierarchy */
.content-block,
.feature-section,
.info-section {
    max-width: var(--max-line-length);
}

/* Better spacing for lists inside content */
.content-block ul,
.content-block ol {
    line-height: var(--line-height-relaxed);
    padding-left: 1.5rem;
}

.content-block li {
    margin-bottom: 0.75rem;
}

.content-block li:last-child {
    margin-bottom: 0;
}

/* Improve spacing between content elements */
.content-block > * + * {
    margin-top: var(--paragraph-spacing);
}

/* Section title styling */
.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-2xl);
    color: var(--color-text-primary);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-border-light);
}

/* Feature cards with improved typography */
.feature-card {
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
}

.feature-card h3 {
    margin-top: 0;
}

/* Callout boxes with better contrast */
.callout {
    padding: var(--spacing-xl) var(--spacing-2xl);
    border-left: 4px solid var(--color-primary);
    background: rgba(0, 51, 102, 0.05);
    border-radius: var(--radius-md);
    line-height: var(--line-height-relaxed);
}

.callout.info {
    border-left-color: var(--color-info);
    background: rgba(2, 132, 199, 0.05);
}

.callout.success {
    border-left-color: var(--color-success);
    background: rgba(5, 150, 105, 0.05);
}

.callout.warning {
    border-left-color: var(--color-warning);
    background: rgba(234, 88, 12, 0.05);
}

.callout.danger {
    border-left-color: var(--color-danger);
    background: rgba(220, 38, 38, 0.05);
}

/* Emphasized text with better visual distinction */
em {
    font-style: italic;
    color: var(--color-text-secondary);
}

strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ===== Reusable Layout Container Patterns ===== */
/* Grid containers with responsive gaps */
.grid-container {
    display: grid;
    gap: var(--spacing-2xl);
}

.grid-container.gap-sm {
    gap: var(--spacing-lg);
}

.grid-container.gap-lg {
    gap: var(--spacing-3xl);
}

.grid-container.gap-xl {
    gap: var(--spacing-4xl);
}

/* Auto-fit responsive grid */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
}

.grid-auto-fit.wide {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.grid-auto-fit.compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Flex containers with responsive direction */
.flex-container {
    display: flex;
    gap: var(--spacing-2xl);
    flex-wrap: wrap;
}

.flex-container.gap-sm {
    gap: var(--spacing-lg);
}

.flex-container.gap-lg {
    gap: var(--spacing-3xl);
}

.flex-container.column {
    flex-direction: column;
}

/* Stack on mobile, flex on desktop */
.flex-stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

@media (min-width: 768px) {
    .flex-stack-md {
        flex-direction: row;
    }
}

.flex-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
    .flex-stack-lg {
        flex-direction: row;
    }
}

/* Content wrapper with max-width */
.content-wrapper {
    max-width: var(--layout-container-max-width);
    margin: 0 auto;
    width: 100%;
}

.content-wrapper.narrow {
    max-width: 768px;
}

.content-wrapper.wide {
    max-width: 1600px;
}

/* Hero content wrapper */
.hero-wrapper {
    max-width: var(--layout-container-max-width);
    margin: 0 auto;
    width: 100%;
    padding: var(--spacing-2xl) var(--spacing-xl);
}

@media (min-width: 768px) {
    .hero-wrapper {
        padding: var(--spacing-4xl) var(--spacing-2xl);
    }
}

/* Section wrapper with background */
.section-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: var(--spacing-4xl) var(--spacing-xl);
}

@media (min-width: 768px) {
    .section-wrapper {
        padding: var(--spacing-4xl) var(--spacing-2xl);
    }
}

/* ===== Card Grid Patterns ===== */
/* Card grid with responsive columns */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-2xl);
}

.card-grid.2-col {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .card-grid.2-col {
        grid-template-columns: 1fr;
    }
}

.card-grid.3-col {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .card-grid.3-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .card-grid.3-col {
        grid-template-columns: 1fr;
    }
}

/* ===== Visual Separator Patterns ===== */
/* Subtle separator between elements */
.separator {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--spacing-2xl) 0;
}

.separator::before {
    content: '';
    flex: 1;
    height: var(--divider-thickness);
    background: var(--divider-gradient-subtle);
}

.separator::after {
    content: '';
    flex: 1;
    height: var(--divider-thickness);
    background: var(--divider-gradient-subtle);
}

.separator-text {
    padding: 0 var(--spacing-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Horizontal rule with gradient */
.hr-gradient {
    height: var(--divider-thickness);
    border: none;
    background: var(--divider-gradient-subtle);
    margin: var(--spacing-3xl) 0;
}

.hr-gradient.primary {
    background: var(--divider-gradient-primary);
}

.hr-gradient.bold {
    height: var(--divider-thickness-bold);
}

/* Visual break between sections */
.section-break {
    position: relative;
    padding: var(--spacing-4xl) 0;
    text-align: center;
}

.section-break::before,
.section-break::after {
    content: '';
    display: block;
    height: var(--divider-thickness);
    background: var(--divider-gradient-subtle);
    margin: var(--spacing-2xl) 0;
}

/* Spacing classes for consistent layout */
.space-y-sm > * + * {
    margin-top: var(--spacing-lg);
}

.space-y-md > * + * {
    margin-top: var(--spacing-2xl);
}

.space-y-lg > * + * {
    margin-top: var(--spacing-3xl);
}

.space-y-xl > * + * {
    margin-top: var(--spacing-4xl);
}

.space-x-sm > * + * {
    margin-left: var(--spacing-lg);
}

.space-x-md > * + * {
    margin-left: var(--spacing-2xl);
}

.space-x-lg > * + * {
    margin-left: var(--spacing-3xl);
}

/* Responsive padding utilities */
.p-responsive {
    padding: var(--spacing-xl);
}

@media (min-width: 768px) {
    .p-responsive {
        padding: var(--spacing-2xl);
    }
}

@media (min-width: 1024px) {
    .p-responsive {
        padding: var(--spacing-3xl);
    }
}

.py-responsive {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
    .py-responsive {
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-2xl);
    }
}

.px-responsive {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

@media (min-width: 768px) {
    .px-responsive {
        padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl);
    }
}
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    flex: 1;
}

/* ===== Responsive Design ===== */

/* Tablet and below */
@media (max-width: 992px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header .header-actions {
        justify-content: flex-start;
        margin-top: var(--spacing-base);
    }

    .page-container {
        padding: var(--spacing-base) var(--spacing-sm);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .page-header .page-title {
        font-size: var(--font-size-2xl);
    }

    .page-header .page-subtitle {
        font-size: var(--font-size-xs);
    }

    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-controls {
        flex-direction: column;
        gap: var(--spacing-base);
    }

    .card-standard .card-header,
    .card-standard .card-body {
        padding: var(--spacing-base);
    }

    .table-compact {
        font-size: var(--font-size-xs);
    }

    .stat-badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-header {
        padding: var(--spacing-sm);
    }

    .page-header .page-title {
        font-size: var(--font-size-xl);
    }

    .page-header .header-actions {
        flex-direction: column;
        width: 100%;
    }

    .page-header .header-actions > * {
        width: 100%;
    }

    .card-standard .card-header,
    .card-standard .card-body {
        padding: var(--spacing-sm);
    }
}