/* Agreements Tab Styles */

.agreements-container {

    padding: 20px;

}



.agreements-header {

    margin-bottom: 30px;

}



.agreements-header h2 {

    color: var(--text-color);

    margin-bottom: 8px;

}



.agreements-header p {

    color: var(--text-muted);

}



.agreements-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

}



.agreement-card {

    background: var(--card-color);

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

    border-radius: 12px;

    padding: 20px;

    transition: transform 0.3s ease;

}



.agreement-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.agreement-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

}



.agreement-type {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.9rem;

    padding: 4px 10px;

    border-radius: 12px;

}



.agreement-type.confidentiality {

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

}



.agreement-type.security {

    background: rgba(59, 130, 246, 0.1);

    color: #3b82f6;

}



.agreement-type.ethics {

    background: rgba(16, 185, 129, 0.1);

    color: #10b981;

}



.agreement-type.privacy {

    background: rgba(139, 92, 246, 0.1);

    color: #8b5cf6;

}



.agreement-type.legal {

    background: rgba(139, 92, 246, 0.1);

    color: #8b5cf6;

}



.agreement-type.government {

    background: rgba(245, 158, 11, 0.1);

    color: #f59e0b;

}



.agreement-type.compliance {

    background: rgba(16, 185, 129, 0.1);

    color: #10b981;

}



.agreement-status {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.9rem;

    padding: 4px 10px;

    border-radius: 12px;

}



.agreement-status.active {

    background: rgba(16, 185, 129, 0.1);

    color: #10b981;

}



.agreement-title {

    font-size: 1.1rem;

    margin-bottom: 15px;

    color: var(--text-color);

}



.agreement-details {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 20px;

}



.detail-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-size: 0.9rem;

}



.detail-item i {

    width: 16px;

    text-align: center;

    color: var(--primary-color);

}



.agreement-actions {

    display: flex;

    gap: 10px;

}



.agreement-actions button {

    flex: 1;

    padding: 8px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    font-size: 0.9rem;

    transition: all 0.3s ease;

}



.view-btn {

    background: var(--primary-color);

    color: white;

}



.view-btn:hover {

    background: var(--secondary-color);

}



.download-btn {

    background: rgba(255, 255, 255, 0.1);

    color: var(--text-color);

}



.download-btn:hover {

    background: rgba(255, 255, 255, 0.15);

}



/* Agreement Modal Styles */

.agreement-modal {

    max-width: 800px;

}



.agreement-preview {

    background: white;

    border-radius: 8px;

    overflow: hidden;

}



.preview-header {

    background: #f8f9fa;

    padding: 20px;

    text-align: center;

    border-bottom: 1px solid #dee2e6;

}



.preview-header img {

    width: 48px;

    height: 48px;

    margin-bottom: 10px;

}



.preview-header h3 {

    color: #333;

    margin: 0;

}



.document-stamp {

    display: inline-block;

    padding: 4px 12px;

    background: #dc3545;

    color: white;

    border-radius: 4px;

    font-size: 0.8rem;

    margin-top: 10px;

}



.preview-content {

    padding: 30px;

    color: #333;

}



.preview-content h4 {

    text-align: center;

    margin-bottom: 30px;

    color: #333;

}



.preview-details {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.detail-row {

    display: flex;

    justify-content: space-between;

    padding-bottom: 10px;

    border-bottom: 1px solid #dee2e6;

}



.detail-row .label {

    font-weight: 500;

    color: #666;

}



.signature-section {

    margin-top: 40px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

}



.signature {

    text-align: center;

}



.signature img {

    max-width: 150px;

    margin-bottom: 10px;

}



.signature-name {

    display: block;

    font-weight: 500;

}



.signature-date {

    font-size: 0.9rem;

    color: #666;

}



.microsoft-seal {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    color: #0078d4;

}



.microsoft-seal i {

    font-size: 2rem;

}



/* Download Alert Styles */

.download-alert {

    text-align: center;

    padding: 30px;

}



.download-alert .alert-icon {

    font-size: 3rem;

    color: var(--primary-color);

    margin-bottom: 20px;

}



.ms-portal-btn {

    background: var(--primary-color);

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 6px;

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 20px auto 0;

    cursor: pointer;

    transition: all 0.3s ease;

}



.ms-portal-btn:hover {

    background: var(--secondary-color);

    transform: translateY(-2px);

}



/* Special styling for legal and government documents */

.agreement-card[data-id^="pc-"],

.agreement-card[data-id^="ep-"],

.agreement-card[data-id^="ld-"] {

    border-left: 4px solid #ef4444;

}



/* Add a special seal for embassy documents */

.agreement-type.government::after {

    content: '🏛️';

    margin-left: 5px;

}



/* Add a special icon for parental consent */

.agreement-type.legal::after {

    content: '👥';

    margin-left: 5px;

}



.minor-badge {

    margin-top: 15px;

    padding: 8px;

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

    border-radius: 6px;

    font-size: 0.9rem;

    display: flex;

    align-items: center;

    gap: 8px;

    justify-content: center;

}



.minor-badge i {

    font-size: 1rem;

}



/* Add these styles for parental consent section */

.parental-consent-section {

    margin-top: 30px;

    padding: 20px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 12px;

}



.parental-consent-section h3 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--text-color);

}



.parent-details {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.parent-info {

    padding: 15px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 8px;

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

}



.parent-info h4 {

    color: var(--primary-color);

    margin-bottom: 15px;

    font-size: 1rem;

}



.value.verified {

    color: #10b981;

    display: flex;

    align-items: center;

    gap: 5px;

}



.value.verified::before {

    content: '✓';

    display: inline-block;

    margin-right: 5px;

}