/* Risk Assessment Plugin Styles */

:root {
    --rap-primary: #2271b1;
    --rap-primary-hover: #135e96;
    --rap-secondary: #6c757d;
    --rap-secondary-hover: #5a6268;
    --rap-success: #28a745;
    --rap-danger: #dc3545;
    --rap-warning: #ffc107;
    --rap-light: #f8f9fa;
    --rap-border: #ddd;
    --rap-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#risk-assessment-app {
    max-width: 1200px;
}

.rap-view {
    display: none;
    background: white;
}

.rap-view.active {
    display: block;
}

h2 {
    margin-bottom: 20px;
    font-weight: 600;
}

h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 600;
    border-bottom: 2px solid var(--rap-primary);
    padding-bottom: 8px;
}

/* Form Elements */
.rap-form-group {
    margin-bottom: 20px;
}

.rap-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.rap-form-group label a {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

.rap-input,
.rap-select,
.rap-textarea {
    width: 100%;
    padding: 6px 12px;
    font-size: 1em;
    border: 1px solid var(--rap-border);
    background-color: #ffffff;
}

.rap-input:focus,
.rap-select:focus,
.rap-textarea:focus {
    outline: none;
    border-color: var(--rap-primary);
}

.rap-textarea {
    resize: vertical;
    font-family: inherit;
}

/* Buttons */
.rap-btn {
    padding: 10px 20px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 10px;
    margin-bottom: 10px;
}

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

.rap-btn-primary:hover {
    background-color: var(--rap-primary-hover);
}

.rap-btn-secondary {
    background-color: var(--rap-secondary);
    color: white;
}

.rap-btn-secondary:hover {
    background-color: var(--rap-secondary-hover);
}

.rap-btn-success {
    background-color: var(--rap-success);
    color: white;
}

.rap-btn-success:hover {
    background-color: #218838;
}

.rap-btn-danger {
    background-color: var(--rap-danger);
    color: white;
}

.rap-btn-sm {
    padding: 6px 12px;
}

/* Assessments List */
.rap-assessments-list {
    margin: 30px 0;
}

#assessments-container {
    display: grid;
    gap: 15px;
}

.assessment-item {
    background: var(--rap-light);
    padding: 12px;
    border-left: 4px solid var(--rap-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assessment-item:hover {
    box-shadow: var(--rap-shadow);
}

.assessment-item-info h4 {
    margin: 0 0 5px 0;
    color: #333;
}

.assessment-item-info p {
    margin: 0;
    color: #666;
}

.assessment-item-actions {
    display: flex;
    gap: 8px;
}

/* Form Sections */
.rap-form-section {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--rap-light);
}

/* Questions */
.question-item {
    background: white;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid var(--rap-border);
}

.question-text {
    font-weight: 500;
    margin-bottom: 15px;
    color: #333;
}

.question-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.answer-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid var(--rap-border);
    background: white;
    cursor: pointer;
    font-weight: 500;
}

.answer-btn:hover {
    border-color: var(--rap-primary);
}

.answer-btn.active {
    background-color: var(--rap-primary);
    color: white;
    border-color: var(--rap-primary);
}

.answer-btn.answer-yes.active {
    background-color: var(--rap-success);
    border-color: var(--rap-success);
}

.answer-btn.answer-no.active {
    background-color: var(--rap-danger);
    border-color: var(--rap-danger);
}

.answer-btn.answer-na.active {
    background-color: var(--rap-warning);
    border-color: var(--rap-warning);
    color: #333;
}

.mitigation-field {
    margin-top: 10px;
}

.mitigation-field label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.mitigation-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rap-border);
}

/* Form Actions */
.rap-form-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--rap-border);
    display: flex;
    gap: 10px;
}

/* View Assessment */
.rap-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.rap-view-actions {
    display: flex;
    gap: 10px;
}

.rap-assessment-content {
    line-height: 1.6;
}

.assessment-detail {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--rap-light);
}

.assessment-detail strong {
    display: block;
    margin-bottom: 5px;
    color: var(--rap-primary);
}

.assessment-questions {
    margin-top: 20px;
}

.question-display {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid var(--rap-border);
}

.question-display.answer-yes {
    border-left-color: var(--rap-success);
}

.question-display.answer-no {
    border-left-color: var(--rap-danger);
}

.question-display.answer-na {
    border-left-color: var(--rap-warning);
}

.question-display-text {
    font-weight: 500;
    margin-bottom: 8px;
}

.question-display-answer {
    display: inline-block;
    padding: 4px 12px;
    font-weight: 500;
}

.question-display-answer.answer-yes {
    background-color: var(--rap-success);
    color: white;
}

.question-display-answer.answer-no {
    background-color: var(--rap-danger);
    color: white;
}

.question-display-answer.answer-na {
    background-color: var(--rap-warning);
    color: #333;
}

.mitigation-display {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #fff3cd;
    border-left: 3px solid var(--rap-danger);
}

.mitigation-display strong {
    display: inline;
    color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
    #risk-assessment-app {padding: 10px;}
    .rap-view {padding: 20px;}
    .rap-view-header {flex-direction: column; align-items: flex-start;}
    .rap-view-actions {width: 100%; flex-direction: column;}
    .rap-btn {width: 100%;}
    .question-buttons {flex-direction: column;}
    .assessment-item {flex-direction: column; align-items: flex-start;}
    .assessment-item-actions {margin-top: 10px; width: 100%;}
    .assessment-item-actions button {flex: 1;}
}

/* Loading State */
.rap-loading {text-align: center;padding: 40px; color: #666;}

.rap-loading::after {content: '...';animation: dots 1.5s steps(3, end) infinite;}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Empty State */
.rap-empty-state {
    text-align: center;
    padding: 40px;
    color: #999;
    font-style: italic;
}

/* Alert Messages */
.rap-alert {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.rap-alert-success {
    background-color: #d4edda;
    border-color: var(--rap-success);
    color: #155724;
}

.rap-alert-error {
    background-color: #f8d7da;
    border-color: var(--rap-danger);
    color: #721c24;
}

.openmodal {text-align: center;} 

#showrepeat {display:none;}

.hidecutoff {display:none;}

/* The Modal */
#rap_help.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
#rap_help .modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 12px;
	border: 1px solid #888;
	width: 60%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#rap_help .modal-content h2 {color: #343848; font-size: 20px; font-weight: 900;padding:0 0 10px 0;margin:0;}

/* The Close Button */
#rap_help .closemodal {
	color: #aaaaaa;
	float: right;
	font-size: 40px;
    margin-top: -12px;
}

#rap_help .closemodal:hover,
#rap_help .closemodal:focus {
	color: #343848;
	text-decoration: none;
	cursor: pointer;
}