/**
 * E2C Stylesheet
 * Author: DevwithAnTic
 * 
 * Note: Going for a full retro Windows 95 / Java Swing vibe here.
 * Pixelated cursors and harsh inset borders are fully intentional! 
 */

:root {
    --bg-color: #e0e0e0;
    --card-bg: #f0f0f0;
    --text-main: #000000;
    --text-muted: #555555;
    --border: #a0a0a0;
    --primary: #0000aa;
    --primary-hover: #0000ff;
    
    /* classic 3D borders */
    --inset-border: inset 2px 2px 0px #808080, inset -2px -2px 0px #ffffff;
    --outset-border: inset 2px 2px 0px #ffffff, inset -2px -2px 0px #808080;
}

/* reset everything */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* proper retro text selection highlight */
::selection {
    background-color: #0000aa;
    color: #ffffff;
}

body {
    font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
    padding: 20px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Cpath d='M1,1 v14 l3,-3 l2,5 l2,-1 l-2,-5 h4 z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='miter' /%3E%3C/svg%3E") 1 1, default;
}

button, input[type="checkbox"], label {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Cpath d='M1,1 v14 l3,-3 l2,5 l2,-1 l-2,-5 h4 z' fill='black' stroke='white' stroke-width='1.2' stroke-linejoin='miter' /%3E%3C/svg%3E") 1 1, pointer !important;
}

.container {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    background-color: var(--card-bg);
    border: 1px solid #000;
    box-shadow: var(--outset-border);
    padding: 30px;
}

h1 {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.input-section {
    margin-bottom: 30px;
}

.input-section label {
    display: block;
    font-weight: normal;
    margin-bottom: 8px;
    font-size: 14px;
}

.input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    font-size: 16px;
    font-family: "Courier New", Courier, monospace;
    color: var(--text-main);
    background-color: #ffffff;
    border: 1px solid #000;
    box-shadow: var(--inset-border);
    outline: none;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Cpath d='M4,2 h8 v2 h-3 v12 h3 v2 h-8 v-2 h3 v-12 h-3 z' fill='black' stroke='white' stroke-width='1.2' stroke-linejoin='miter' /%3E%3C/svg%3E") 8 10, text !important;
}

input[type="text"]:focus {
    background-color: #e6f2ff;
}

.help-text {
    font-size: 12px;
    color: var(--text-muted);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    box-shadow: var(--inset-border);
    position: relative;
    cursor: pointer;
    margin-right: 2px;
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 7px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: 1px;
    left: 4px;
}

button {
    padding: 6px 20px;
    font-size: 14px;
    font-weight: normal;
    color: #000;
    background-color: #e0e0e0;
    border: 1px solid #000;
    box-shadow: var(--outset-border);
    cursor: pointer;
    appearance: none;
}

button:hover {
    background-color: #e8e8e8;
}

button:active {
    background-color: #d0d0d0;
    box-shadow: var(--inset-border);
    padding: 7px 19px 5px 21px; /* shift text when pressed */
}

.error-msg {
    color: #cc0000;
    background-color: #ffcccc;
    border: 1px solid #cc0000;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    display: none;
    box-shadow: var(--inset-border);
}

.output-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.circuit-container {
    overflow: auto;
    border: 1px solid #000;
    box-shadow: var(--inset-border);
    background-color: #ffffff;
    background-image: radial-gradient(circle, #999999 1px, transparent 1px);
    background-size: 20px 20px;
    height: 60vh;
    min-height: 450px;
    min-width: 0;
    max-height: 800px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M10,2 h2 v8 h8 v2 h-8 v8 h-2 v-8 h-8 v-2 h8 z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='miter' /%3E%3C/svg%3E") 11 11, crosshair !important;
}

.circuit-container.is-grabbing {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='24'%3E%3Cpath d='M13,2 l3,3 h-2 v6 h6 v-2 l3,3 l-3,3 v-2 h-6 v6 h2 l-3,3 l-3,-3 h2 v-6 h-6 v2 l-3,-3 l3,-3 v2 h6 v-6 h-2 z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='miter' /%3E%3C/svg%3E") 13 12, move !important;
}

canvas {
    display: block;
}

.summary-container {
    border: 1px solid #000;
    box-shadow: var(--inset-border);
    background-color: #ffffff;
    padding: 25px;
}

.summary-container h2 {
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

#summary-content p {
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.6;
}

#summary-content ul li {
    font-size: 13px;
    color: var(--text-muted);
}

table.truth-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
    border: 2px outset #ffffff;
    background-color: #ffffff;
}

table.truth-table th, table.truth-table td {
    border: 1px solid #a0a0a0;
    padding: 6px 12px;
    text-align: center;
}

table.truth-table th {
    background-color: #e0e0e0;
    font-weight: normal;
    box-shadow: var(--outset-border);
}

table.truth-table tr:nth-child(even) {
    background-color: #f0f0f0;
}

table.truth-table td.out-col {
    font-weight: bold;
    background-color: #e6e6e6;
}

table.truth-table tr:nth-child(even) td.out-col {
    background-color: #d0d0d0;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    .container {
        padding: 15px;
    }
    .input-group {
        flex-direction: column;
    }
    button {
        width: 100%;
        padding: 10px;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #dfdfdf;
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}

::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    box-shadow: inset 1px 1px 0px #ffffff, inset -1px -1px 0px #808080;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

::-webkit-scrollbar-corner {
    background: #dfdfdf;
}

.circuit-container::-webkit-scrollbar-track {
    background: #f0f0f0;
}
/* --- FOOTER STATUS BAR --- */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 6px 12px;
    font-size: 13px;
    color: #333333;
    background-color: var(--bg-color);
    border: 1px solid #000;
    box-shadow: var(--inset-border);
}

.status-bar a {
    color: var(--primary);
    text-decoration: none;
    font-weight: bold;
}

.status-bar a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}