/* Layout Blocks */

/* 1 Column Block Wrapper */
.scdev-block-col1-wrap {
    display: flex;
    justify-content: center;
    margin: 10px auto;
}

/* 1 Column Block */
.scdev-block-col1 {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    resize: both;
    overflow: hidden;
}

body.night-mode .scdev-block-col1 {
    border-color: rgba(255, 255, 255, 0.15);
}

/* 2 Columns Block */
.scdev-block-col2 {
    display: flex;
    gap: 2px;
    margin: 10px 0;
}

.scdev-block-col2 .scdev-col {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    resize: both;
    overflow: hidden;
}

body.night-mode .scdev-block-col2 .scdev-col {
    border-color: rgba(255, 255, 255, 0.15);
}

/* 3 Columns Block (1 big + 2 small) */
.scdev-block-col3 {
    display: flex;
    gap: 2px;
    margin: 10px 0;
    align-items: stretch;
}

.scdev-block-col3 .scdev-col-big {
    flex: 1;
    height: 260px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    overflow: hidden;
}

.scdev-block-col3 .scdev-col-small-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    align-self: stretch;
}

.scdev-block-col3 .scdev-col-small {
    height: 130px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    overflow: hidden;
}

.scdev-block-col3 .scdev-col-small img {
    max-width: 100%;
    height: auto;
    display: block;
}

body.night-mode .scdev-block-col3 .scdev-col-big,
body.night-mode .scdev-block-col3 .scdev-col-small {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .scdev-block-col2,
    .scdev-block-col3 {
        flex-direction: column;
    }
    
    .scdev-block-col3 .scdev-col-small-wrap {
        flex-direction: row;
    }
}


/* CTA Buttons */
.scdev-cta-btn {
    display: inline-block;
    padding: 12px 24px;
    margin: 10px 5px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.scdev-cta-primary {
    background: #0073aa;
    color: #fff;
}

.scdev-cta-primary:hover {
    background: #005a87;
    color: #fff;
}

.scdev-cta-success {
    background: #46b450;
    color: #fff;
}

.scdev-cta-success:hover {
    background: #3a9642;
    color: #fff;
}

.scdev-cta-warning {
    background: #f56e28;
    color: #fff;
}

.scdev-cta-warning:hover {
    background: #d85a1a;
    color: #fff;
}

.scdev-cta-danger {
    background: #dc3232;
    color: #fff;
}

.scdev-cta-danger:hover {
    background: #c12525;
    color: #fff;
}

.scdev-cta-secondary {
    background: #6c757d;
    color: #fff;
}

.scdev-cta-secondary:hover {
    background: #5a6268;
    color: #fff;
}

/* Night Mode */
body.night-mode .scdev-cta-primary {
    background: #5dade2;
}

body.night-mode .scdev-cta-primary:hover {
    background: #3498db;
}

body.night-mode .scdev-cta-success {
    background: #52c55a;
}

body.night-mode .scdev-cta-success:hover {
    background: #46b450;
}

body.night-mode .scdev-cta-warning {
    background: #ff7f3f;
}

body.night-mode .scdev-cta-warning:hover {
    background: #f56e28;
}

body.night-mode .scdev-cta-danger {
    background: #e74c3c;
}

body.night-mode .scdev-cta-danger:hover {
    background: #dc3232;
}

body.night-mode .scdev-cta-secondary {
    background: #7f8c8d;
}

body.night-mode .scdev-cta-secondary:hover {
    background: #6c757d;
}

/* Outline Buttons */
.scdev-cta-primary-outline {
    background: transparent;
    color: #0073aa;
    border: 2px solid #0073aa;
}

.scdev-cta-primary-outline:hover {
    background: #0073aa;
    color: #fff;
}

.scdev-cta-success-outline {
    background: transparent;
    color: #46b450;
    border: 2px solid #46b450;
}

.scdev-cta-success-outline:hover {
    background: #46b450;
    color: #fff;
}

.scdev-cta-warning-outline {
    background: transparent;
    color: #f56e28;
    border: 2px solid #f56e28;
}

.scdev-cta-warning-outline:hover {
    background: #f56e28;
    color: #fff;
}

.scdev-cta-danger-outline {
    background: transparent;
    color: #dc3232;
    border: 2px solid #dc3232;
}

.scdev-cta-danger-outline:hover {
    background: #dc3232;
    color: #fff;
}

.scdev-cta-secondary-outline {
    background: transparent;
    color: #6c757d;
    border: 2px solid #6c757d;
}

.scdev-cta-secondary-outline:hover {
    background: #6c757d;
    color: #fff;
}

/* Night Mode Outlines */
body.night-mode .scdev-cta-primary-outline {
    color: #5dade2;
    border-color: #5dade2;
}

body.night-mode .scdev-cta-primary-outline:hover {
    background: #5dade2;
    color: #fff;
}

body.night-mode .scdev-cta-success-outline {
    color: #52c55a;
    border-color: #52c55a;
}

body.night-mode .scdev-cta-success-outline:hover {
    background: #52c55a;
    color: #fff;
}

body.night-mode .scdev-cta-warning-outline {
    color: #ff7f3f;
    border-color: #ff7f3f;
}

body.night-mode .scdev-cta-warning-outline:hover {
    background: #ff7f3f;
    color: #fff;
}

body.night-mode .scdev-cta-danger-outline {
    color: #e74c3c;
    border-color: #e74c3c;
}

body.night-mode .scdev-cta-danger-outline:hover {
    background: #e74c3c;
    color: #fff;
}

body.night-mode .scdev-cta-secondary-outline {
    color: #7f8c8d;
    border-color: #7f8c8d;
}

body.night-mode .scdev-cta-secondary-outline:hover {
    background: #7f8c8d;
    color: #fff;
}


/* Page Break */
.scdev-page-break {
    margin: 20px 0;
    padding: 10px;
    text-align: center;
    border-top: 2px dashed rgba(0, 0, 0, 0.2);
    border-bottom: 2px dashed rgba(0, 0, 0, 0.2);
    color: #999;
    font-size: 12px;
    user-select: none;
}

body.night-mode .scdev-page-break {
    border-color: rgba(255, 255, 255, 0.2);
    color: #666;
}


/* Thin scrollbars for columns */
.scdev-block-col1::-webkit-scrollbar,
.scdev-block-col2 .scdev-col::-webkit-scrollbar,
.scdev-block-col3 .scdev-col-big::-webkit-scrollbar,
.scdev-block-col3 .scdev-col-small::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.scdev-block-col1::-webkit-scrollbar-track,
.scdev-block-col2 .scdev-col::-webkit-scrollbar-track,
.scdev-block-col3 .scdev-col-big::-webkit-scrollbar-track,
.scdev-block-col3 .scdev-col-small::-webkit-scrollbar-track {
    background: transparent;
}

.scdev-block-col1::-webkit-scrollbar-thumb,
.scdev-block-col2 .scdev-col::-webkit-scrollbar-thumb,
.scdev-block-col3 .scdev-col-big::-webkit-scrollbar-thumb,
.scdev-block-col3 .scdev-col-small::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1px;
}

.scdev-block-col1::-webkit-scrollbar-thumb:hover,
.scdev-block-col2 .scdev-col::-webkit-scrollbar-thumb:hover,
.scdev-block-col3 .scdev-col-big::-webkit-scrollbar-thumb:hover,
.scdev-block-col3 .scdev-col-small::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox thin scrollbar */
.scdev-block-col1,
.scdev-block-col2 .scdev-col,
.scdev-block-col3 .scdev-col-big,
.scdev-block-col3 .scdev-col-small {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Night mode scrollbars */
body.night-mode .scdev-block-col1::-webkit-scrollbar-thumb,
body.night-mode .scdev-block-col2 .scdev-col::-webkit-scrollbar-thumb,
body.night-mode .scdev-block-col3 .scdev-col-big::-webkit-scrollbar-thumb,
body.night-mode .scdev-block-col3 .scdev-col-small::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.night-mode .scdev-block-col1::-webkit-scrollbar-thumb:hover,
body.night-mode .scdev-block-col2 .scdev-col::-webkit-scrollbar-thumb:hover,
body.night-mode .scdev-block-col3 .scdev-col-big::-webkit-scrollbar-thumb:hover,
body.night-mode .scdev-block-col3 .scdev-col-small::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

body.night-mode .scdev-block-col1,
body.night-mode .scdev-block-col2 .scdev-col,
body.night-mode .scdev-block-col3 .scdev-col-big,
body.night-mode .scdev-block-col3 .scdev-col-small {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}