/* ==========================================================================
   REESPONDER UI REFERENCE — VARIANT 1
   03 / COMPONENTS
   ========================================================================== */

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

.ui-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);

    background: var(--ui-surface);

    box-shadow: var(--ui-shadow-1);
}

.ui-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 22px;

    border-bottom: 1px solid var(--ui-border-soft);
}

.ui-panel-title {
    margin: 0;

    font-size: var(--ui-size-15);
    font-weight: var(--ui-weight-semibold);
}

.ui-panel-description {
    margin:
        4px
        0
        0;

    color: var(--ui-text-muted);

    font-size: var(--ui-size-12);
}

.ui-panel-body {
    padding: 22px;
}

.ui-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    padding: 16px 22px;

    border-top: 1px solid var(--ui-border-soft);

    background: var(--ui-surface-muted);
}

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

.ui-metrics {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

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

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);

    overflow: hidden;
}

.ui-metric {
    min-width: 0;

    padding:
        20px
        22px;

    border-right:
        1px
        solid
        var(--ui-border-soft);
}

.ui-metric:last-child {
    border-right: 0;
}

.ui-metric-label {
    margin-bottom: 8px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);

    font-weight:
        var(--ui-weight-medium);
}

.ui-metric-value {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-24);

    font-weight:
        var(--ui-weight-semibold);

    letter-spacing:
        var(--ui-letter-tight);
}

.ui-metric-subtext {
    margin-top: 6px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-11);
}

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

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 22px;

    padding: 2px 7px;

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

    border-radius: 4px;

    background:
        var(--ui-surface-muted);

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-11);

    font-weight:
        var(--ui-weight-semibold);

    line-height: 1;
}

.ui-badge-success {
    border-color:
        var(--ui-success-border);

    background:
        var(--ui-success-soft);

    color:
        var(--ui-success);
}

.ui-badge-warning {
    border-color:
        var(--ui-warning-border);

    background:
        var(--ui-warning-soft);

    color:
        var(--ui-warning);
}

.ui-badge-danger {
    border-color:
        var(--ui-danger-border);

    background:
        var(--ui-danger-soft);

    color:
        var(--ui-danger);
}

.ui-badge-info {
    border-color:
        var(--ui-info-border);

    background:
        var(--ui-info-soft);

    color:
        var(--ui-info);
}

/* ==========================================================================
   STATUS DOT
   ========================================================================== */

.ui-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;
}

.ui-status-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--ui-text-faint);
}

.ui-status-online .ui-status-dot {
    background:
        var(--ui-success);
}

.ui-status-warning .ui-status-dot {
    background:
        var(--ui-warning);
}

.ui-status-error .ui-status-dot {
    background:
        var(--ui-danger);
}

/* ==========================================================================
   NOTICE
   ========================================================================== */

.ui-notice {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        14px
        16px;

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

    border-radius:
        var(--ui-radius-sm);

    background:
        var(--ui-surface-muted);
}

.ui-notice-mark {
    width:
        8px;

    height:
        8px;

    margin-top:
        6px;

    flex:
        0
        0
        auto;

    border-radius:
        50%;

    background:
        var(--ui-text-muted);
}

.ui-notice-title {
    margin-bottom:
        2px;

    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-notice-copy {
    margin:
        0;

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-12);
}

.ui-notice-info {
    border-color:
        var(--ui-info-border);

    background:
        var(--ui-info-soft);
}

.ui-notice-info .ui-notice-mark {
    background:
        var(--ui-info);
}

.ui-notice-success {
    border-color:
        var(--ui-success-border);

    background:
        var(--ui-success-soft);
}

.ui-notice-success .ui-notice-mark {
    background:
        var(--ui-success);
}

.ui-notice-warning {
    border-color:
        var(--ui-warning-border);

    background:
        var(--ui-warning-soft);
}

.ui-notice-warning .ui-notice-mark {
    background:
        var(--ui-warning);
}

.ui-notice-danger {
    border-color:
        var(--ui-danger-border);

    background:
        var(--ui-danger-soft);
}

.ui-notice-danger .ui-notice-mark {
    background:
        var(--ui-danger);
}

/* ==========================================================================
   TABLE
   ========================================================================== */

.ui-table-wrap {
    border:
        1px
        solid
        var(--ui-border);

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);

    overflow:
        auto;
}

.ui-table {
    width:
        100%;

    min-width:
        720px;
}

.ui-table th {
    padding:
        10px
        14px;

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

    background:
        var(--ui-surface-muted);

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-11);

    font-weight:
        var(--ui-weight-semibold);

    text-align:
        left;

    text-transform:
        uppercase;

    letter-spacing:
        0.045em;
}

.ui-table td {
    padding:
        13px
        14px;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-13);

    vertical-align:
        middle;
}

.ui-table tr:last-child td {
    border-bottom:
        0;
}

.ui-table tbody tr:hover {
    background:
        #fafbf9;
}

.ui-table-primary {
    color:
        var(--ui-text);

    font-weight:
        var(--ui-weight-medium);
}

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

.ui-empty {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        260px;

    padding:
        40px;

    text-align:
        center;
}

.ui-empty-icon {
    display:
        grid;

    width:
        42px;

    height:
        42px;

    margin-bottom:
        16px;

    place-items:
        center;

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

    border-radius:
        var(--ui-radius-sm);

    background:
        var(--ui-surface-muted);

    color:
        var(--ui-text-muted);
}

.ui-empty h3 {
    margin-bottom:
        6px;
}

.ui-empty p {
    max-width:
        420px;

    margin-bottom:
        18px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-13);
}

/* ==========================================================================
   DROPDOWN
   ========================================================================== */

.ui-dropdown {
    width:
        220px;

    padding:
        5px;

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

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);

    box-shadow:
        var(--ui-shadow-2);
}

.ui-dropdown-label {
    padding:
        8px
        9px
        5px;

    color:
        var(--ui-text-faint);

    font-size:
        var(--ui-size-10, 10px);

    font-weight:
        var(--ui-weight-semibold);

    text-transform:
        uppercase;

    letter-spacing:
        0.06em;
}

.ui-dropdown-item {
    display:
        flex;

    align-items:
        center;

    width:
        100%;

    min-height:
        34px;

    padding:
        0
        9px;

    border:
        0;

    border-radius:
        4px;

    background:
        transparent;

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-13);

    text-align:
        left;

    cursor:
        pointer;
}

.ui-dropdown-item:hover {
    background:
        var(--ui-surface-strong);

    color:
        var(--ui-text);
}

.ui-dropdown-item-danger {
    color:
        var(--ui-danger);
}

.ui-dropdown-separator {
    height:
        1px;

    margin:
        5px
        4px;

    background:
        var(--ui-border-soft);
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.ui-modal-backdrop {
    display:
        grid;

    min-height:
        520px;

    padding:
        32px;

    place-items:
        center;

    background:
        rgba(17, 19, 16, 0.46);
}

.ui-modal {
    width:
        min(
            100%,
            520px
        );

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

    border-radius:
        var(--ui-radius-lg);

    background:
        var(--ui-surface);

    box-shadow:
        var(--ui-shadow-3);
}

.ui-modal-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        20px
        22px;

    border-bottom:
        1px
        solid
        var(--ui-border-soft);
}

.ui-modal-header h3 {
    margin:
        0;
}

.ui-modal-body {
    padding:
        22px;
}

.ui-modal-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding:
        16px
        22px;

    border-top:
        1px
        solid
        var(--ui-border-soft);

    background:
        var(--ui-surface-muted);
}

/* ==========================================================================
   TOAST
   ========================================================================== */

.ui-toast {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    width:
        min(
            100%,
            360px
        );

    padding:
        13px
        14px;

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

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);

    box-shadow:
        var(--ui-shadow-2);
}

.ui-toast-title {
    margin-bottom:
        2px;

    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-toast-copy {
    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */

.ui-progress {
    height:
        7px;

    overflow:
        hidden;

    border-radius:
        2px;

    background:
        var(--ui-surface-strong);
}

.ui-progress-fill {
    height:
        100%;

    background:
        var(--ui-accent);
}

.ui-progress-success .ui-progress-fill {
    background:
        var(--ui-success);
}

.ui-progress-warning .ui-progress-fill {
    background:
        var(--ui-warning);
}

.ui-progress-danger .ui-progress-fill {
    background:
        var(--ui-danger);
}

/* ==========================================================================
   USAGE METER
   ========================================================================== */

.ui-usage {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

.ui-usage-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}

.ui-usage-label {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-medium);
}

.ui-usage-value {
    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   AVATAR
   ========================================================================== */

.ui-avatar {
    display:
        inline-grid;

    width:
        32px;

    height:
        32px;

    place-items:
        center;

    flex:
        0
        0
        auto;

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

    border-radius:
        50%;

    background:
        var(--ui-surface-strong);

    color:
        var(--ui-text-soft);

    font-size:
        var(--ui-size-11);

    font-weight:
        var(--ui-weight-semibold);
}

/* ==========================================================================
   PERSON ROW
   ========================================================================== */

.ui-person {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.ui-person-copy {
    min-width:
        0;
}

.ui-person-name {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-medium);
}

.ui-person-meta {
    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-11);

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}

/* ==========================================================================
   SETTINGS ROW
   ========================================================================== */

.ui-settings-list {
    border-top:
        1px
        solid
        var(--ui-border);
}

.ui-settings-row {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        28px;

    padding:
        18px
        0;

    border-bottom:
        1px
        solid
        var(--ui-border);
}

.ui-settings-row-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-settings-row-copy {
    max-width:
        620px;

    margin-top:
        4px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   ACTIVITY
   ========================================================================== */

.ui-activity {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        22px
        minmax(0, 1fr);

    gap:
        12px;

    padding:
        12px
        0;
}

.ui-activity-marker {
    display:
        grid;

    width:
        22px;

    height:
        22px;

    place-items:
        center;

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

    border-radius:
        50%;

    background:
        var(--ui-surface);

    color:
        var(--ui-text-muted);

    font-size:
        10px;
}

.ui-activity-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);
}

.ui-activity-time {
    margin-top:
        3px;

    color:
        var(--ui-text-faint);

    font-size:
        var(--ui-size-11);
}

/* ==========================================================================
   INTEGRATION CARD
   ========================================================================== */

.ui-integration {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        16px;

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

    border-radius:
        var(--ui-radius-md);

    background:
        var(--ui-surface);
}

.ui-integration-logo {
    display:
        grid;

    width:
        42px;

    height:
        42px;

    place-items:
        center;

    flex:
        0
        0
        auto;

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

    border-radius:
        var(--ui-radius-sm);

    background:
        var(--ui-surface-muted);

    color:
        var(--ui-text);

    font-size:
        var(--ui-size-12);

    font-weight:
        var(--ui-weight-bold);
}

.ui-integration-copy {
    min-width:
        0;

    flex:
        1;
}

.ui-integration-title {
    color:
        var(--ui-text);

    font-size:
        var(--ui-size-13);

    font-weight:
        var(--ui-weight-semibold);
}

.ui-integration-description {
    margin-top:
        3px;

    color:
        var(--ui-text-muted);

    font-size:
        var(--ui-size-12);
}

/* ==========================================================================
   SKELETON
   ========================================================================== */

@keyframes ui-skeleton-pulse {
    0% {
        opacity:
            0.55;
    }

    50% {
        opacity:
            1;
    }

    100% {
        opacity:
            0.55;
    }
}

.ui-skeleton {
    border-radius:
        3px;

    background:
        #e2e5df;

    animation:
        ui-skeleton-pulse
        1.4s
        ease-in-out
        infinite;
}

.ui-skeleton-line {
    height:
        10px;
}

.ui-skeleton-title {
    width:
        38%;

    height:
        15px;
}

.ui-skeleton-short {
    width:
        54%;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .ui-metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .ui-metric:nth-child(2) {
        border-right:
            0;
    }

    .ui-metric:nth-child(-n + 2) {
        border-bottom:
            1px
            solid
            var(--ui-border-soft);
    }
}

@media (max-width: 560px) {
    .ui-panel-header {
        flex-direction:
            column;
    }

    .ui-panel-footer {
        flex-wrap:
            wrap;
    }

    .ui-metrics {
        grid-template-columns:
            1fr;
    }

    .ui-metric {
        border-right:
            0;

        border-bottom:
            1px
            solid
            var(--ui-border-soft);
    }

    .ui-metric:last-child {
        border-bottom:
            0;
    }

    .ui-settings-row {
        grid-template-columns:
            1fr;
    }
}