/* LogiSim - Logic Circuit Simulator Styles */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: #0d1117;
    color: #c9d1d9;
    overflow: hidden;
}

/* The ad footer's height lives here, on the root, and nowhere else.
   It must NOT be declared on .ad-footer itself: CSS custom properties
   inherit from parent to child, so a variable set on the footer would be
   visible to the footer and its own subtree only — never to #app, which is
   the footer's PARENT and the element that needs the number to reserve room
   for it. Declared there it would read as unset in #app, the reservation
   would silently become 0, and the canvas would run underneath the footer. */
:root {
    --ad-footer-h: 56px;
}

#app {
    display: flex;
    /* 100vh is the LARGEST viewport: the height Chrome Android reports with
       the address bar collapsed. While the bar is showing the visible area is
       shorter, so a 100vh app runs off the bottom of the screen — and its last
       rows, the status bar included, sit behind the fixed ad footer.
       100dvh tracks the viewport that is actually visible right now. Two
       declarations, not one: dvh wins where it is supported (Chrome 108+,
       Safari 15.4+), vh stays as the fallback everywhere else. */
    height: 100vh;
    height: 100dvh;
}

/* Safe-area insets.
   Android 15+ (target API 35/36) draws apps edge-to-edge: the status bar and
   the gesture bar are transparent and the page renders underneath them. Any
   control left in that strip is unreachable. These env() values are the OS's
   own measurements of the unsafe strip — notch height, gesture-bar height,
   and the same for left/right in landscape. They are 0 on browsers that lack
   support, and 0 on a phone with neither, so the max() fallback keeps the old
   layout intact instead of subtracting nothing or breaking it.
   Padding here (not margin) keeps each element's background extending behind
   the system bars, which is what edge-to-edge actually looks like, while the
   content itself stays out of them.
   The fallback for browsers without env() support is 0px, and a plain desktop
   browser evaluates every one of these insets to 0px too — so the layout is
   byte-for-byte the old one there and only shifts on a device that actually
   reports a notch or a gesture bar. */
#app {
    padding-top: max(0px, env(safe-area-inset-top));
    /* Reserve the footer's own height below the content, so the status bar
       never sits underneath it. --ad-footer-h is defined by .ad-footer below,
       so a single number drives both this reservation and the footer itself. */
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--ad-footer-h, 0px));
}

/* Ad footer.
   Fixed at the bottom, above the gesture bar, with a 2px outline that keeps
   it readable while the ad slot is empty. The height is one variable so the
   #app reservation above and this element can never drift apart. */
.ad-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ad-footer-h);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    background: #161b22;
    border-top: 2px solid #4ecca3;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    overflow: hidden;
}

/* Pro removes the ads: the footer collapses instead of leaving a gap. */
.ad-footer.ad-footer--hidden {
    display: none;
}

/* A visible empty state, because a silent empty box reads as a bug. */
.ad-footer .ad-placeholder {
    font-size: 0.75em;
    color: #8b949e;
    user-select: none;
}

/* Sidebar */
#sidebar {
    width: 200px;
    background: #161b22;
    border-right: 1px solid #30363d;
    padding: 15px;
    /* Landscape notch on the left edge sits over the palette. */
    padding-left: max(15px, calc(15px + env(safe-area-inset-left)));
    overflow-y: auto;
}

#sidebar h2 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #58a6ff;
}

.palette-section {
    margin-bottom: 20px;
}

.palette-section h3 {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 5px;
    background: #21262d;
    border-radius: 6px;
    cursor: grab;
    transition: background 0.2s, transform 0.1s;
}

.palette-item:hover {
    background: #30363d;
    transform: translateX(2px);
}

.palette-item:active {
    cursor: grabbing;
}

/* Placement mode: a palette item is armed after a click, and the next click
   on the canvas drops that component there. The highlight must be obvious on
   the dark palette (#21262d), so it uses the app's green accent with a ring
   rather than a background change a colour-blind user could miss. */
.palette-item.placing {
    background: #1d3a2f;
    border: 2px solid #4ecca3;
    padding: 6px 8px;
    cursor: crosshair;
}

.palette-item.placing:hover {
    background: #24493a;
    transform: none;
}

.palette-icon {
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
}

.switch-icon {
    background: #4ecca3;
    border-radius: 10px;
    position: relative;
}

.switch-icon::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    right: 2px;
}

.gate-icon {
    background: #e94560;
    border-radius: 3px;
    color: #fff;
}

.led-icon {
    width: 16px;
    height: 16px;
    background: #333;
    border-radius: 50%;
    border: 2px solid #555;
}

/* Main Area */
#main-area {
    flex: 1;
    /* min-width:auto would let a long, nowrap status text widen the whole
       document and reflow the toolbar — pin the flex minimum to 0 instead. */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Toolbar */
#toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    /* The toolbar's first row sits right under the status bar, where a notch
       in portrait hides its left edge. Applying these unconditionally (no
       media guard) is deliberate: the inset is 0 on every device that has no
       notch, so the desktop layout is unchanged, while a phone gets the extra
       padding exactly where it is needed. A min-width guard would do the
       opposite — it would protect only the devices that report no notch. */
    padding-left: max(15px, calc(15px + env(safe-area-inset-left)));
    padding-right: max(15px, calc(15px + env(safe-area-inset-right)));
}

.toolbar-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #21262d;
    color: #c9d1d9;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
}

.toolbar-btn:hover {
    background: #30363d;
}

.toolbar-btn.primary {
    background: #238636;
    color: #fff;
}

.toolbar-btn.primary:hover {
    background: #2ea043;
}

.toolbar-btn.danger {
    background: #4a1f24;
    color: #ff9aa2;
}

.toolbar-btn.danger:hover {
    background: #5c262c;
}

/* Active state: delete mode is armed (kept after .danger so it wins) */
.toolbar-btn.active {
    background: #da3633;
    color: #fff;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: #30363d;
}

#example-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    font-size: 0.9em;
}

/* Status bar: own row under the canvas. It used to live inside the toolbar,
   where a long message was squeezed to ~26px and unreadable. */
#status-bar {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    background: #161b22;
    border-top: 1px solid #30363d;
    font-size: 0.85em;
    /* Brighter than the old #8b949e on purpose: at 0.85em, on a dark
       background, that grey was legible on a desktop monitor but vanished on
       a phone's smaller, dimmer screen. The status bar is where a rejected
       free-tier action explains itself, so it cannot be decorative. */
    color: #adbac7;
    overflow: hidden;
    /* The status text sits lowest on the page, straight above the gesture
       bar. Same unconditional rule as the toolbar: 0px on devices with no
       gesture bar, real padding on those that have one. */
    padding-bottom: max(5px, calc(5px + env(safe-area-inset-bottom)));
    padding-left: max(15px, calc(15px + env(safe-area-inset-left)));
    padding-right: max(15px, calc(15px + env(safe-area-inset-right)));
}

#status-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Error colour lives here too, applied by updateStatus() via a class.
   Inline colours in JS would override the stylesheet again. */
#status-text.is-error {
    color: #f85149;
}

/* Canvas */
#canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* Touch gestures must reach the canvas as pointer events (one finger on a
       pin must not scroll the page); the rest of the page scrolls normally. */
    touch-action: none;
    user-select: none;
}

/* Component styles on canvas */
.component {
    position: absolute;
    cursor: move;
    user-select: none;
}

.component.selected {
    outline: 2px solid #58a6ff;
}

/* Switch component */
.switch-component {
    width: 50px;
    height: 30px;
    background: #238636;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
}

.switch-component::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    top: 4px;
    transition: left 0.2s;
}

.switch-component.on::after {
    left: 24px;
}

.switch-component.off::after {
    left: 4px;
}

/* Gate component */
.gate-component {
    min-width: 60px;
    height: 50px;
    background: #da3633;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85em;
    color: #fff;
    padding: 0 10px;
}

/* LED component */
.led-component {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #30363d;
    border: 3px solid #58a6ff;
    transition: all 0.2s;
}

.led-component.on {
    background: #238636;
    border-color: #238636;
    box-shadow: 0 0 15px #238636;
}

.led-component.off {
    background: #30363d;
    border-color: #58a6ff;
}

/* Pin styles */
.pin {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #8b949e;
    border-radius: 50%;
    cursor: crosshair;
}

.pin:hover {
    background: #58a6ff;
    transform: scale(1.3);
}

.pin.input {
    left: -5px;
}

.pin.output {
    right: -5px;
}

/* Wire styles */
.wire {
    stroke: #58a6ff;
    stroke-width: 2;
    fill: none;
}

.wire.active {
    stroke: #238636;
    stroke-width: 3;
}

/* Grid pattern on canvas */
.grid-pattern {
    stroke: #30363d;
    stroke-width: 0.5;
}

/* New component icons */
.clock-icon {
    background: #d29922;
    border-radius: 3px;
    color: #fff;
}

.dff-icon {
    background: #8957e5;
    border-radius: 3px;
    color: #fff;
}

.sr-icon {
    background: #db6d28;
    border-radius: 3px;
    color: #fff;
}

.seven-icon {
    background: #e94560;
    border-radius: 3px;
    color: #fff;
    font-size: 0.6em;
    font-weight: bold;
}

.subcircuit-icon {
    background: #3498db;
    border-radius: 3px;
    color: #fff;
}

.decoder-icon {
    background: #2d5a8c;
    border-radius: 3px;
    color: #fff;
}

.multi-icon {
    background: #e94560;
    border-radius: 3px;
    color: #fff;
    font-size: 0.6em;
    font-weight: bold;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Hidden attribute must always win over display:flex above */
.modal[hidden] {
    display: none !important;
}

.modal-content {
    background: #161b22;
    border-radius: 8px;
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
    min-width: 400px;
    border: 1px solid #30363d;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #30363d;
}

.modal-header h3 {
    margin: 0;
    color: #58a6ff;
}

.modal-close {
    background: none;
    border: none;
    color: #8b949e;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: #58a6ff;
}

.modal-body {
    padding: 20px;
}

/* Help modal: compact on small screens */
#help-modal {
    font-size: 13px;
}
#help-modal .modal-content {
    max-width: 92vw;
    max-height: 85vh;
    min-width: 0;
    width: auto;
    padding: 14px 16px;
    overflow: hidden;
}
#help-modal .modal-header {
    padding: 10px 12px;
}
#help-modal .modal-header h3 {
    font-size: 1rem;
}
#help-modal .modal-body {
    padding: 10px 12px 12px;
}
#help-modal h4 {
    margin: 10px 0 6px;
    font-size: 0.92rem;
    color: #58a6ff;
}
#help-modal p {
    margin: 0 0 8px;
    line-height: 1.35;
}
#help-modal ul {
    margin: 0 0 8px;
    padding-left: 16px;
}
#help-modal li {
    margin: 0 0 4px;
    line-height: 1.35;
}
#help-modal li + li {
    margin-top: 2px;
}
#help-modal a {
    color: #58a6ff;
    text-decoration: none;
}
#help-modal a:hover {
    text-decoration: underline;
}

/* Truth table styles */
#truth-table-container {
    overflow-x: auto;
}

#truth-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

#truth-table th,
#truth-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #30363d;
}

#truth-table th {
    background: #21262d;
    color: #c9d1d9;
    font-weight: bold;
}

#truth-table td.input-cell {
    background: #1a2332;
    color: #238636;
}

#truth-table td.output-cell {
    background: #2a1a2a;
    color: #da3633;
}

#truth-table tr:nth-child(even) {
    background: #161b22;
}

#truth-table tr:hover {
    background: #21262d;
}

.pro-locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.pro-locked::after {
    content: "PRO";
    font-size: 0.6em;
    background: #e94560;
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    font-weight: bold;
}
#btn-upgrade {
    margin-left: auto;
}

/* Narrow screens (phones): keep the palette compact so the canvas keeps a
   usable width. The page itself still scrolls normally outside the canvas. */
@media (max-width: 768px) {
    #sidebar {
        width: 104px;
        padding: 8px;
    }

    #sidebar h2 {
        font-size: 1em;
        margin-bottom: 8px;
    }

    .palette-section {
        margin-bottom: 12px;
    }

    .palette-item {
        padding: 6px 7px;
        gap: 6px;
        font-size: 0.8em;
    }

    .palette-icon {
        width: 22px;
        height: 16px;
    }

    #toolbar {
        overflow-x: auto;
    }
}