/* =====================================================
   Communio Countertop Forensic Toolkit

   Main Styling File
   Foundation Release v0.1

===================================================== */


/* ---------- Core Theme ---------- */


:root {

    --communio-blue: #163a5f;
    --communio-light-blue: #2c6e9b;
    --communio-accent: #4da3d9;

    --background: #f4f7fa;
    --surface: #ffffff;

    --text: #1c1c1c;

    --border: #d8e0e8;

    --success: #2e7d32;
    --warning: #f9a825;
    --danger: #c62828;

    --shadow:
    0 4px 15px rgba(0,0,0,0.10);

    --radius: 12px;

}



/* ---------- Global ---------- */


* {

    box-sizing:
    border-box;

}



body {

    margin:
    0;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:
    var(--background);

    color:
    var(--text);

}



/* ---------- Header ---------- */


.header {

    background:
    var(--communio-blue);

    color:
    white;

    padding:
    25px;

    display:
    flex;

    justify-content:
    space-between;

    align-items:
    center;

    box-shadow:
    var(--shadow);

}



.branding h1 {

    margin:
    0;

    font-size:
    36px;

    letter-spacing:
    1px;

}



.branding h2 {

    margin:
    5px 0;

    font-weight:
    400;

}



.branding p {

    margin:
    0;

    opacity:
    0.85;

}



#darkModeButton {

    background:
    transparent;

    border:
    none;

    font-size:
    28px;

    cursor:
    pointer;

}



/* ---------- Navigation ---------- */


.navigation {

    display:
    flex;

    flex-wrap:
    wrap;

    gap:
    8px;

    padding:
    15px;

    background:
    white;

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

}



.navigation button {

    padding:
    12px 18px;

    border-radius:
    8px;

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

    background:
    white;

    cursor:
    pointer;

    font-size:
    15px;

}



.navigation button:hover {

    background:
    #edf4fa;

}



.navigation button.active {

    background:
    var(--communio-blue);

    color:
    white;

}





/* ---------- Main Area ---------- */


main {

    max-width:
    1200px;

    margin:
    auto;

    padding:
    25px;

}



.page {

    display:
    none;

}



.page.active {

    display:
    block;

}





/* ---------- Cards ---------- */


.card {

    background:
    var(--surface);

    padding:
    25px;

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

    margin-bottom:
    25px;

}



.card h2 {

    margin-top:
    0;

    color:
    var(--communio-blue);

}





/* ---------- Dashboard ---------- */


.dashboard-grid {

    display:
    grid;

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

    gap:
    20px;

}



.tool-card {

    background:
    white;

    padding:
    20px;

    border-radius:
    var(--radius);

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

    box-shadow:
    0 2px 8px rgba(0,0,0,0.05);

}



.tool-card h3 {

    margin-top:
    0;

    color:
    var(--communio-blue);

}



.tool-card button {

    background:
    var(--communio-light-blue);

    color:
    white;

    border:
    none;

    padding:
    10px 18px;

    border-radius:
    8px;

    cursor:
    pointer;

}





/* ---------- Forms ---------- */


label {

    display:
    block;

    font-weight:
    bold;

    margin-top:
    15px;

}



input {

    width:
    100%;

    padding:
    12px;

    margin-top:
    6px;

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

    border-radius:
    8px;

    font-size:
    16px;

}





/* ---------- Footer ---------- */


footer {

    text-align:
    center;

    padding:
    20px;

    color:
    #666;

    font-size:
    14px;

}





/* ---------- Dark Mode ---------- */


body.dark {

    --background:
    #121212;

    --surface:
    #1e1e1e;

    --text:
    #eeeeee;

    --border:
    #333333;

}



body.dark .navigation {

    background:
    #1e1e1e;

}



body.dark .navigation button {

    background:
    #222;

    color:
    white;

}



body.dark .tool-card {

    background:
    #222;

}





/* ---------- Mobile ---------- */


@media(max-width:700px){


.header {

    flex-direction:
    column;

    text-align:
    center;

}



.branding h1 {

    font-size:
    28px;

}



.navigation {

    flex-direction:
    column;

}



.navigation button {

    width:
    100%;

}



main {

    padding:
    10px;

}


}

/* ===========================================
   CJD Decision Tool
=========================================== */

.cjd-checklist{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:15px;

}


.cjd-check-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:10px;

    border:1px solid #d9d9d9;

    border-radius:8px;

    background:#fafafa;

    cursor:pointer;

}


.cjd-check-item:hover{

    background:#f0f7ff;

}


.cjd-check-item input[type="checkbox"]{

    width:20px;

    height:20px;

    margin-top:2px;

    flex-shrink:0;

}


.cjd-check-item span{

    flex:1;

    line-height:1.4;

}

/* ===========================================
   CJD Examination Extent Cards
=========================================== */

.cjd-radio-group {
    display: grid;
    gap: 14px;
    margin: 22px 0;
}

.cjd-radio-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.cjd-radio-card:hover {
    border-color: var(--communio-light-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.cjd-radio-card:has(
    input[type="radio"]:checked
) {
    border-color: var(--communio-blue);
    background: #edf6fc;
    box-shadow: 0 0 0 3px rgba(44, 110, 155, 0.14);
}

.cjd-radio-card input[type="radio"] {
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--communio-blue);
}

.cjd-radio-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cjd-radio-content strong {
    font-size: 17px;
    color: var(--communio-blue);
}

.cjd-radio-content small {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.cjd-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.secondary-button {
    background: transparent;
    color: var(--communio-blue);
    border: 1px solid var(--communio-blue);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.cjd-error-message {
    margin-top: 12px;
    padding: 12px;
    border-left: 4px solid var(--danger);
    background: #fdeaea;
    color: var(--danger);
    font-weight: 600;
}

body.dark .cjd-radio-card:has(
    input[type="radio"]:checked
) {
    background: #183247;
}

body.dark .cjd-radio-content small {
    color: #cccccc;
}