/**
 * cakal.cloud APIs Page Styles
 * API management page styling and components - Consistent Design System
 */

/* Action Button Styles - Matching Settings Design */
.btn-group-sm .btn {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    font-size: var(--font-size-xs) !important;
    line-height: var(--line-height-tight) !important;
    border-radius: var(--border-radius-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    transition: var(--transition-none) !important;
    height: 1.8rem !important;
    min-height: 1.8rem !important;
    border: none !important;
}

.btn-group-sm .btn:hover {
    transform: none !important;
    box-shadow: var(--shadow-none) !important;
}

.btn-group-sm .btn i {
    font-size: var(--font-size-xs) !important;
}

/* API Logs Status Badge Styles */
.badge.bg-success {
    background-color: var(--brand-success) !important;
    color: var(--text-white) !important;
}

.badge.bg-warning {
    background-color: var(--brand-warning) !important;
    color: var(--text-white) !important;
}

.badge.bg-danger {
    background-color: var(--brand-danger) !important;
    color: var(--text-white) !important;
}

.badge.bg-primary {
    background-color: var(--brand-primary) !important;
    color: var(--text-white) !important;
}

.badge.bg-secondary {
    background-color: var(--text-muted) !important;
    color: var(--text-white) !important;
}

.badge.bg-info {
    background-color: var(--brand-info) !important;
    color: var(--text-white) !important;
}

/* API Management Specific Styles */
.api-row {
    transition: var(--transition-none);
}

.api-row:hover {
    background-color: var(--bg-secondary);
}

.api-status-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.api-actions {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
}

.api-actions .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* API Stats Cards */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    text-align: center;
    transition: var(--transition-none);
}

.stat-card:hover {
    transform: none;
    box-shadow: var(--shadow-none);
}

.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* API Table Styles */
.api-table {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.api-table .table {
    margin-bottom: 0;
}

.api-table .table th {
    background: var(--bg-card-header);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md);
}

.api-table .table td {
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    vertical-align: middle;
}

.api-table .table tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* API Form Styles */
.api-form .form-control {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.api-form .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
}

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

/* API Modal Form Switch Styling - Completely Redesigned */
#apiModal .form-switch {
    padding-left: 3rem;
    margin-bottom: var(--spacing-md);
    position: relative;
}

#apiModal .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.5rem;
    margin-left: -3rem;
    background-color: #e9ecef;
    border: 2px solid #dee2e6;
    border-radius: 1rem;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
}

#apiModal .form-switch .form-check-input::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

#apiModal .form-switch .form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-image: none !important;
}

#apiModal .form-switch .form-check-input:checked::before {
    transform: translateX(1rem);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#apiModal .form-switch .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
    background-image: none !important;
}

#apiModal .form-switch .form-check-label {
    margin-bottom: 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    padding-left: var(--spacing-sm);
    user-select: none;
}

/* Toggle Visual Feedback States */
#apiModal .form-switch.toggle-enabled .form-check-input {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

#apiModal .form-switch.toggle-enabled .form-check-label {
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
}

#apiModal .form-switch.toggle-disabled .form-check-input {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

#apiModal .form-switch.toggle-disabled .form-check-label {
    color: var(--text-muted);
}

/* Health Check Settings Card Styling */
#apiModal .card {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
    margin-bottom: var(--spacing-md);
}

#apiModal .card-header {
    background: var(--bg-card-header);
    border-bottom: 1px solid var(--border-color-light);
    padding: var(--spacing-md) var(--spacing-lg);
}

#apiModal .card-header h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

#apiModal .card-header h6::before {
    content: '⚡';
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-md);
}

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

/* Health Check Interval Input Group */
#apiModal .input-group {
    display: flex;
    align-items: stretch;
}

#apiModal .input-group .form-control {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#apiModal .input-group .form-select {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    max-width: 120px;
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

#apiModal .input-group .form-control:focus + .form-select,
#apiModal .input-group .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
}

/* Toggle Switch Hover Effects */
#apiModal .form-switch:hover .form-check-input {
    border-color: var(--brand-primary);
}

#apiModal .form-switch:hover .form-check-label {
    color: var(--brand-primary);
}

/* Toggle Switch Active State */
#apiModal .form-switch .form-check-input:active {
    transform: scale(0.95);
}

/* Health Check Settings Description */
#apiModal .health-check-description {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
}

/* Health Check Interval Input Group */
#apiModal .input-group {
    display: flex;
    align-items: stretch;
}

#apiModal .input-group .form-control {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#apiModal .input-group .form-select {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    max-width: 120px;
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

#apiModal .input-group .form-control:focus + .form-select,
#apiModal .input-group .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
}

/* API Status Indicators */
.api-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: var(--spacing-xs);
}

.api-status-indicator.status-active {
    background-color: var(--brand-success);
}

.api-status-indicator.status-inactive {
    background-color: var(--brand-danger);
}

.api-status-indicator.status-pending {
    background-color: var(--brand-warning);
}

/* API Metrics Grid */
.api-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.api-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

.api-metric-card .metric-icon {
    font-size: var(--font-size-2xl);
    color: var(--brand-primary);
    margin-bottom: var(--spacing-sm);
}

.api-metric-card .metric-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.api-metric-card .metric-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* API Logs Section - Matching Audit Page Design */
.card {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
}

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

.card-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.card-title i {
    color: var(--brand-primary);
    opacity: 0.8;
}

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

/* Filter Layout */
.form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.form-control,
.form-select {
    height: 38px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15);
    background: var(--bg-primary);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--brand-primary);
}

/* Table Styling */
.table-responsive {
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color-light);
}

.compact-table {
    margin-bottom: 0;
}

.compact-table thead th {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    position: sticky;
    top: 0;
    z-index: 10;
}

.compact-table tbody td {
    border-top: 1px solid var(--border-color-light);
    vertical-align: middle;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.compact-table tbody tr:hover {
    background-color: var(--bg-hover);
}

/* API Logs Badge Styling */
.badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Method Badge Colors */
.bg-primary { background: var(--brand-primary); color: white !important; }
.bg-success { background: #10b981 !important; color: white !important; }
.bg-warning { background: #f59e0b !important; color: white !important; }
.bg-danger { background: #ef4444 !important; color: white !important; }
.bg-info { background: #06b6d4 !important; color: white !important; }
.bg-secondary { background: #8b5cf6 !important; color: white !important; }

/* Button Styling */
.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-white);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color-light);
    background: transparent;
    transition: all 0.2s ease;
}

.btn-outline-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color-light);
    color: var(--text-primary);
}

.btn-outline-secondary:disabled {
    color: var(--text-light);
    border-color: var(--border-color-light);
    background: transparent;
    opacity: 0.6;
}

/* Pagination Styling */
.btn-group-sm .btn {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Responsive Design */
@media (max-width: 768px) {
    .api-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .api-table .table th,
    .api-table .table td {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
    
    .api-actions {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .card-body {
        padding: var(--spacing-md);
    }
    
    .compact-table thead th,
    .compact-table tbody td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 576px) {
    .stat-card {
        padding: var(--spacing-sm);
    }
    
    .stat-value {
        font-size: var(--font-size-lg);
    }
    
    .api-metric-card {
        padding: var(--spacing-sm);
    }
    
    .api-metric-card .metric-value {
        font-size: var(--font-size-lg);
    }

    .card-body {
        padding: var(--spacing-sm);
    }
    
    .compact-table thead th,
    .compact-table tbody td {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
}

/* API Logs Table Column Widths - Maximized Spacing */
.compact-table th:nth-child(1), /* API Name */
.compact-table td:nth-child(1) {
    width: 20%;
    min-width: 180px;
}

.compact-table th:nth-child(2), /* Method */
.compact-table td:nth-child(2) {
    width: 10%;
    min-width: 80px;
    text-align: center;
}

.compact-table th:nth-child(3), /* Endpoint */
.compact-table td:nth-child(3) {
    width: 25%;
    min-width: 200px;
}

.compact-table th:nth-child(4), /* Status */
.compact-table td:nth-child(4) {
    width: 12%;
    min-width: 100px;
    text-align: center;
}

.compact-table th:nth-child(5), /* Health Check */
.compact-table td:nth-child(5) {
    width: 15%;
    min-width: 120px;
    text-align: center;
}

.compact-table th:nth-child(6), /* Last Response */
.compact-table td:nth-child(6) {
    width: 12%;
    min-width: 120px;
    text-align: center;
}

.compact-table th:nth-child(7), /* Actions */
.compact-table td:nth-child(7) {
    width: 6%;
    min-width: 140px;
    text-align: center;
}

/* Method Column Styling */
.api-row td:nth-child(2) .badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background: var(--bg-outline-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color-light);
    min-width: 60px;
}

/* API Name Column */
.api-row td:nth-child(1) {
    vertical-align: top;
    padding: var(--spacing-md);
    min-width: 180px;
}

.api-row td:nth-child(1) .bi-code-slash {
    font-size: var(--font-size-lg);
    color: var(--brand-primary);
    flex-shrink: 0;
}

.api-row td:nth-child(1) .fw-medium {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
}

.api-row td:nth-child(1) small {
    font-size: var(--font-size-sm);
    line-height: 1.4;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
}

/* Endpoint Column */
.endpoint-container {
    min-width: 200px;
}

.endpoint-url {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color-light);
    word-break: break-all;
    line-height: 1.4;
    display: block;
    width: 100%;
}

/* Status Column */
.api-row td:nth-child(4) {
    text-align: center;
    vertical-align: middle;
    min-width: 100px;
}

.status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.api-row td:nth-child(4) .badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    min-width: 80px;
}

/* Health Check Column */
.api-row td:nth-child(5) {
    text-align: center;
    vertical-align: middle;
    min-width: 120px;
}

.health-check-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.api-row td:nth-child(5) .badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

.api-row td:nth-child(5) small {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    text-align: center;
}

/* Last Response Column */
.api-row td:nth-child(6) {
    text-align: center;
    vertical-align: middle;
    min-width: 120px;
}

.api-row td:nth-child(6) .fw-medium {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.api-row td:nth-child(6) small {
    font-size: var(--font-size-xs);
    line-height: 1.3;
}

/* Actions Column */
.api-row td:nth-child(7) {
    text-align: center;
    vertical-align: middle;
    padding: var(--spacing-sm);
    min-width: 140px;
}

.btn-group-sm .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    border: 1px solid var(--border-color-light);
}

.btn-group-sm .btn i {
    font-size: var(--font-size-sm);
}

/* Responsive Design for API Endpoints */
@media (max-width: 1200px) {
    .endpoint-url {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }
    
    .api-row td:nth-child(1) {
        min-width: 160px;
    }
    
    .endpoint-container {
        min-width: 180px;
    }
    
    .api-row td:nth-child(2) {
        min-width: 70px;
    }
}

@media (max-width: 992px) {
    .api-row td:nth-child(1) {
        padding: var(--spacing-sm);
        min-width: 140px;
    }
    
    .api-row td:nth-child(1) .fw-medium {
        font-size: var(--font-size-sm);
    }
    
    .endpoint-container {
        min-width: 160px;
    }
    
    .api-row td:nth-child(2) {
        min-width: 60px;
    }
    
    .btn-group-sm .btn {
        min-width: 28px;
        height: 28px;
        padding: var(--spacing-xs);
    }
    
    .api-row td:nth-child(4),
    .api-row td:nth-child(5),
    .api-row td:nth-child(6) {
        min-width: 90px;
    }
    
    .api-row td:nth-child(7) {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .compact-table thead th,
    .compact-table tbody td {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .api-row td:nth-child(1) .bi-code-slash {
        font-size: var(--font-size-md);
    }
    
    .endpoint-url {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
        word-break: break-word;
    }
    
    .api-row td:nth-child(2) {
        min-width: 50px;
    }
    
    .api-row td:nth-child(4),
    .api-row td:nth-child(5),
    .api-row td:nth-child(6) {
        min-width: 70px;
    }
    
    .api-row td:nth-child(7) {
        min-width: 100px;
    }
}

@media (max-width: 576px) {
    .card-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .card-header .d-flex {
        justify-content: center;
    }
    
    .input-group {
        width: 100% !important;
    }
    
    .compact-table thead th,
    .compact-table tbody td {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .endpoint-container {
        min-width: 100px;
    }
    
    .api-row td:nth-child(1) {
        min-width: 120px;
    }
    
    .api-row td:nth-child(2) {
        min-width: 40px;
    }
    
    .api-row td:nth-child(4),
    .api-row td:nth-child(5),
    .api-row td:nth-child(6) {
        min-width: 60px;
    }
    
    .api-row td:nth-child(7) {
        min-width: 80px;
    }
}