/***********************************************************************
 * File: components.css
 * Module: Design System
 * Purpose:
 * Defines reusable user interface components used throughout
 * the AI Governance application.
 *
 * Dependencies:
 * - style.css
 * - layout.css
 *
 * Technical Notes:
 * Components should be reusable across the Public Website,
 * Customer Website and Internal Website.
 *
 * This file intentionally contains no page-specific layouts.
 *
 * Future Enhancements:
 * - Progress indicators
 * - Modal windows
 * - Toast notifications
 * - Timeline components
 * - Workflow cards
 *
 * Build:
 * AI Governance Build 2 MVP/V1
 *
 * Version:
 * 2.0.0
 ***********************************************************************/


/* ===========================================================
   STANDARD CARD
   =========================================================== */

.ag-card {

    background: var(--ag-surface);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius);

    box-shadow: var(--ag-shadow);

    padding: var(--ag-space-lg);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   PANEL
   =========================================================== */

.ag-panel {

    background: var(--ag-surface);

    border-left: 4px solid var(--ag-primary);

    padding: var(--ag-space-lg);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   SECTION HEADER
   =========================================================== */

.ag-section-header {

    margin-bottom: var(--ag-space-lg);

    padding-bottom: var(--ag-space-sm);

    border-bottom: 1px solid var(--ag-border);

}


/* ===========================================================
   METRIC CARD
   =========================================================== */

.ag-metric {

    background: var(--ag-surface);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius);

    box-shadow: var(--ag-shadow);

    padding: var(--ag-space-lg);

}


.ag-metric-value {

    font-size: 2rem;

    font-weight: 700;

    color: var(--ag-primary);

}


.ag-metric-label {

    margin-top: .5rem;

    color: var(--ag-text-light);

}


/* ===========================================================
   INFORMATION BOX
   =========================================================== */

.ag-info {

    background: #F3F7FA;

    border-left: 4px solid var(--ag-primary);

    padding: var(--ag-space-md);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   SUCCESS
   =========================================================== */

.ag-success-box {

    background: #EAF7EC;

    border-left: 4px solid var(--ag-success);

    padding: var(--ag-space-md);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   WARNING
   =========================================================== */

.ag-warning-box {

    background: #FFF9E6;

    border-left: 4px solid var(--ag-warning);

    padding: var(--ag-space-md);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   DANGER
   =========================================================== */

.ag-danger-box {

    background: #FDEEEE;

    border-left: 4px solid var(--ag-danger);

    padding: var(--ag-space-md);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   STATUS BADGES
   =========================================================== */

.ag-status {

    display: inline-block;

    padding: .25rem .75rem;

    border-radius: 20px;

    font-size: .85rem;

    font-weight: 600;

}

.ag-status-success {

    background: #EAF7EC;

    color: var(--ag-success);

}

.ag-status-warning {

    background: #FFF9E6;

    color: #8A5A00;

}

.ag-status-danger {

    background: #FDEEEE;

    color: var(--ag-danger);

}

.ag-status-info {

    background: #EEF5FA;

    color: var(--ag-primary);

}


/* ===========================================================
   BUTTONS
   =========================================================== */

.ag-button {

    display: inline-block;

    padding: .75rem 1.5rem;

    background: var(--ag-primary);

    color: #FFFFFF;

    border: none;

    border-radius: var(--ag-radius);

    cursor: pointer;

    font-size: 1rem;

    font-weight: 600;

    text-align: center;

    transition: background .2s ease;

}


.ag-button:hover {

    background: #17314F;

    text-decoration: none;

}


.ag-button-secondary {

    background: var(--ag-secondary);

}


.ag-button-secondary:hover {

    background: #404F5D;

}


.ag-button-success {

    background: var(--ag-success);

}


.ag-button-warning {

    background: var(--ag-warning);

    color: #000000;

}


.ag-button-danger {

    background: var(--ag-danger);

}


/* ===========================================================
   ACTION BAR
   =========================================================== */

.ag-action-bar {

    display: flex;

    gap: var(--ag-space-md);

    flex-wrap: wrap;

    margin-top: var(--ag-space-lg);

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   EMPTY STATE
   =========================================================== */

.ag-empty {

    text-align: center;

    padding: 4rem 2rem;

    border: 2px dashed var(--ag-border);

    border-radius: var(--ag-radius);

    color: var(--ag-text-light);

}


/* ===========================================================
   DIVIDER
   =========================================================== */

.ag-divider {

    height: 1px;

    background: var(--ag-border);

    margin: var(--ag-space-xl) 0;

}


/* ===========================================================
   BADGE
   =========================================================== */

.ag-badge {

    display: inline-block;

    padding: .20rem .60rem;

    border-radius: 4px;

    background: var(--ag-primary);

    color: #FFFFFF;

    font-size: .80rem;

    font-weight: 600;

}