/*
 * SPDX-FileCopyrightText: 2022 Pepijn de Vos
 *
 * SPDX-License-Identifier: MPL-2.0
 */

body, html {
    padding: 0;
    margin: 0;
}

.mosaic-app {
    font: 400 16px/18px 'Roboto', sans-serif;
    color: #222222A5;
}

.mosaic-app input, .mosaic-app textarea {
    background: #00000008 0% 0% no-repeat padding-box;
    border: 2px solid #2222220D;
    border-radius: 5px;
    padding: 5px 10px;
}

/* Global button styling (libman style as default) */
.mosaic-app button,
.mosaic-app input[type=submit] {
    background: #f8f8f8 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 4px #00000033;
    border-radius: 7px;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

.mosaic-app button:active {
    box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.2);
}

.mosaic-app button.primary,
.mosaic-app input[type=submit] {
    background-color: #0E1A32;
    color: white;
}

/* Global buttongroup styling */
.mosaic-app .buttongroup {
    background: #f8f8f8 0% 0% no-repeat padding-box;
    box-shadow: 0px 1px 4px #00000033;
    border-radius: 7px;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.mosaic-app .buttongroup.primary {
    background-color: #0E1A32;
    color: white;
}

.mosaic-app .buttongroup.primary > button,
.mosaic-app .buttongroup summary::after {
    color: white;
    border-color: white;
}

.mosaic-app .buttongroup.primary > button:disabled {
    color: grey;
}

.mosaic-app .buttongroup summary {
    padding: 10px 15px;
    border-left: 1px solid rgb(224, 224, 224);
}

.mosaic-app .buttongroup summary::after {
    transform: rotate(45deg);
    top: -5px;
    left: 0px;
}

.mosaic-app .buttongroup details > button {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
}

.mosaic-app .buttongroup > button {
    background: none;
    box-shadow: none;
}

/* Global details/summary triangle styling */
.mosaic-app details summary {
    list-style-type: none;
    cursor: pointer;
}

.mosaic-app details summary::after {
    content: "";
    border: solid black;
    border-width: 0 1px 1px 0;
    padding: 3px;
    transform: rotate(-45deg);
    float: right;
    position: relative;
    top: 4px;
    left: -4px;
    transition: transform 100ms;
}

.mosaic-app details[open] summary::after {
    transform: rotate(45deg);
}

/* Special cases for details triangles with different backgrounds */
.mosaic-app .cellsel details[open] summary::after {
    border-color: white;
}

/* Global modal and window styling */
.mosaic-app .window {
    background: white;
    box-shadow: 0px 0px 10px #00000033;
    border-radius: 7px;
    border: 1px solid lightgray;
    padding: 20px 20px;
}

.mosaic-app .window.hidden {
    display: none;
}

.mosaic-app .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.mosaic-app .modal input[type=text] {
    display: block;
    margin: 1em 0;
}

.mosaic-app .modal input[type=submit] {
    margin-left: 1em;
}

.mosaic-app .contextmenu {
    position: absolute;
    z-index: 1000;
}

.mosaic-app .contextmenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
/* library manager */

.mosaic-libman h1 {
    font: 500 25px/25px 'Roboto', sans-serif;
    letter-spacing: 0.85px;
    color: #222222;
    text-transform: uppercase;
}

.mosaic-libman h2 {
    font: 500 25px/25px 'Roboto', sans-serif;
    letter-spacing: 0.72px;
    color: #222222;
}

.mosaic-libman h3 {
    font: 500 20px/25px 'Roboto', sans-serif;
    letter-spacing: 0.72px;
    color: #222222;
}

.mosaic-libman button svg {
    margin-right: 0.5em;
    font-size: 20px;
    vertical-align: middle;
}

.mosaic-libman .libhead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}

.syncstatus.active svg {
    animation: 1.5s linear infinite spinner;
}
.syncstatus.done {
    animation: 1.5s linear fadeout;
    opacity: 0;
}
@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.mosaic-libman .addbuttons {
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 20px;
    padding: 20px 20px;
    border-bottom: 1px solid #e7e7e7;
}

.mosaic-libman .schsel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mosaic-libman .schsel h2 {
    padding: 0 20px;
}

.mosaic-libman .schsel .schematics {
    padding: 0 20px;
    overflow: auto;
}



.mosaic-libman .libraries {
    grid-area: libraries;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e7e7e7;
    overflow: hidden;
}
.mosaic-libman .libraries > *{
    padding: 1em;
}
.mosaic-libman .libraries .dbsel {
    flex-grow: 1;
}
.mosaic-libman .schematics {
    grid-area: schematics;
    display: flex;
    flex-direction: column;
}
.mosaic-libman .cellsel {
    flex-grow: 1;
    overflow: auto;
}
.mosaic-libman .cellsel details {
    margin: 0.5em 0;
}

.mosaic-libman .dbprops {
    padding: 0;
    background-color: #00000007;
}

.mosaic-libman .proppane {
  grid-area: properties;
  border-left: 1px solid #e7e7e7;
  padding: 20px;
}

.mosaic-libman .proppane .preview {
    padding: 1em;
    margin-bottom: 1em;
    background-color: #f3f3f3;
}

.mosaic-libman .properties {
    display: grid;
    grid-template-columns: [labels] auto [controls] auto;
    grid-auto-flow: row;
    row-gap: 1em;
    align-items: center;
}

.mosaic-libman .properties label {
  grid-column: labels;
  grid-row: auto;
}

.mosaic-libman .properties input {
    grid-column: controls;
    grid-row: auto;
    box-sizing: border-box;
    width: 100%;
}

.mosaic-libman input[type=radio] {
    display: none;
}
.mosaic-libman input[type=radio] + label {
    display: block;
    padding: 10px 15px;
    margin-top: 5px;
    cursor: pointer;
}
.mosaic-libman input[type=radio]:checked + label {
    background-color: rgba(0, 0, 0, 0.041);
    border-radius: 7px;
}

.mosaic-libman .schematics label svg {
    font-size: 1.5em;
    vertical-align: middle;
    margin-right: 0.2em;
}

.mosaic-libman .schematics label form {
    display: inline;
}

.mosaic-libman details .detailbody {
    max-height: 0px;
    transition: max-height 1s;
    overflow: hidden;
    margin-left:7px;
}
.mosaic-libman details[open] .detailbody {
    max-height: 10000px;
}
.mosaic-libman details summary {
    list-style-type: none;
}
.mosaic-libman .cellsel details summary {
    padding: 10px 15px;
    border-radius: 7px;
    cursor: pointer;
}
.mosaic-libman .dbprops details summary {
    padding:1em;
    cursor: pointer;
}
.mosaic-libman .dbprops details form {
    margin: 0 1em 1em 1em;
}

.mosaic-libman .cellsel details[open] summary {
    background: #0E1A32 0% 0% no-repeat padding-box;
    color:white;
}


.mosaic-libman {
    display: grid;
    grid-template-areas:
    'libraries schematics properties';
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 2fr 2fr;
}


.mosaic-libman .empty {
    margin: 1em 0;
}
/* editor */
.mosaic-editor * {
  margin: 0;
  padding: 0;
}

.mosaic-editor h1, .mosaic-editor h2, .mosaic-editor h3, .mosaic-editor h4, .mosaic-editor h5, .mosaic-editor h6 {
  font-size: 1.1em;
  margin: 0.5em 0;
}

.mosaic-editor p {
  margin: 0.5em 0;
}

.mosaic-editor, .mosaic-container, .mosaic-libman {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mosaic-container {
  display: flex;
  flex-direction: column;
}

.mosaic-container .menu {
  grid-row: 1;
  background-color: white;
  box-shadow: 0px 0px 8px #00000008;
  border: 0.5px solid #7070701f;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(icons/Logo.svg);
  background-repeat: no-repeat;
  background-position: 15px 50%;
  padding-left: 65px;
}
.mosaic-container .menu .primary {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.mosaic-container .menu .secondary {
  display: flex;
  justify-content: flex-end;
}

.mosaic-container .content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.mosaic-container .content {
    position: relative;
    flex: 1;
    overflow: hidden;
    z-index: 1; /* Lower z-index than notebook */
}

.mosaic-container .devicetray {
    position: absolute;
    top: 25px;
    left: 25px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000008;
    border: 0.5px solid #7070701f;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    max-height: calc(100% - 50px);
    /* overflow-y: auto; */
    /* overflow-x: visible; */
    max-width: 5em;
    box-sizing: border-box;
    user-select: none;
}

.mosaic-container .sidebar {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 8px #00000008;
    border: 0.5px solid #70707040;
    border-radius: 10px;
    width: 300px;
    max-height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}
.mosaic-container .sidebar h1 {
    background-color: #0E1A32;
    color: white;
    margin: 0;
    border-radius: 10px 10px 0 0;
    padding: 15px 20px;
    font: 500 18px/20px 'Roboto', sans-serif;
    letter-spacing: 0.70px;
}
.mosaic-container .sidebar .properties {
    padding: 20px;
}

.mosaic-container .chrome a,
.mosaic-container .chrome button,
.mosaic-container .chrome label {
  padding: 0.5em;
  margin: 0.75em 0.5em;
  background-color: white;
  box-shadow: 0px 0px 8px #0000001A;
  border-radius: 5px;
  width: 1em;
  height: 1em;
  color: #222222A5;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
}

.mosaic-container .chrome svg {
  fill: #222222A5;
}

.mosaic-container .chrome span.sep {
  border-right: 1px solid lightgray;
  padding: 0;
  margin: 0.75em 0.5em;
}

.mosaic-container .chrome a:hover,
.mosaic-container .chrome button:hover {
    background-color: lightgray;
}
.mosaic-container .chrome a:active,
.mosaic-container .chrome a.active,
.mosaic-container .chrome button.active,
.mosaic-container .chrome input[type=radio]:checked + label {
  background-color: #0E1A32;
  color: white;
}
.mosaic-container .chrome a:active svg,
.mosaic-container .chrome a.active svg,
.mosaic-container .chrome button.active svg,
.mosaic-container .chrome input[type=radio]:checked + label svg {
  fill: white;
}

.mosaic-container .chrome input[type=radio] {
  display: none;
}

.mosaic-container .devicetray button {
    padding: 0.7em;
    width: 25px;
    height: 25px;
    display: inline-block;
}
.mosaic-container .devicetray svg {
    width: 25px;
    height: 25px;
}
.mosaic-container .devicetray details {
    position: relative;
}
.mosaic-container .devicetray summary {
    list-style-type: none;
    cursor: pointer;
}
.mosaic-container .devicetray details summary::after {
    /* Reset conflicting positioning from global rule */
    position: absolute;
    float: none;
    top: auto;
    left: auto;
    
    /* Position in bottom right */
    bottom: 0.8em;
    right: 0.7em;
    
    /* Override padding and rotation for devicetray */
    padding: 2px;
    transform: rotate(45deg); /* closed = down ▼ */
}

.mosaic-container .devicetray details[open] summary::after {
    transform: rotate(-45deg); /* open = right ▶ */
}

.mosaic-container .devicetray details summary:has(button.active)::after {
    border-color: white; /* white triangle when button is active */
}
.mosaic-container .devicetray details .tray {
    position: absolute;
    top:0;
    left:120%;
    display: flex;
    flex-direction: row;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /* box-shadow: 0px 0px 8px #00000008; */
    border: 0.5px solid #7070701f;
    border-radius: 5px;
    z-index: 0;
}
.mosaic-container .devicetray details .tray::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(50% - 10px);
    left: -10px;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    background: white;
    border-left: 0.5px solid #7070701f;
    border-bottom: 0.5px solid #7070701f;
}

.mosaic-editor .properties {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr;
  grid-auto-flow: row;
  grid-gap: .8em;
}
.mosaic-editor .properties label {
  grid-column: labels;
  grid-row: auto;
}

.mosaic-editor .properties input {
    grid-column: controls;
    grid-row: auto;
    box-sizing: border-box;
    width: 100%;
}

#mosaic_canvas {
  overflow: hidden;
}



.mosaic-editor svg {
  overflow: visible;
  stroke-linecap: round;
}

.mosaic-editor g.staging,
.mosaic-editor g.toolstaging {
    opacity: 0.5;
}

g.device {
  transform-box: view-box;
  transform-origin: center;
  user-select: none;
}

g.staging, g.toolstaging g.device {
    transition: all 70ms ease-out;
}

line.wirebb {
  stroke: transparent;
  transition: stroke 200ms;
  stroke-width: 25px;
  fill: none;
}
line.wirebb:hover {
  stroke: #00000008;
}

text {
    user-select: none;
}

text.identifier {
    font-size: 0.7em;
}

g.text text {
    font-size: 0.7em;
}

rect.select {
    fill: #0000001A
}

/* tetris theme */

.tetris {
    background-color: #f9f9f9;
}

.tetris.pan {
    cursor: url(icons/arrows-move.svg) 6 0, grab;
}

.tetris.wire {
    cursor: url(icons/pencil.svg) 0 16, crosshair;
}

.tetris.probe {
    cursor: url(icons/search.svg) 5 5, crosshair;
}

.tetris.eraser .wire:hover,
.tetris.eraser .device {
    cursor: url(icons/eraser.svg) 6 14, crosshair;
}

.tetris line.grid {
  stroke: lightgray;
  stroke-width: 0.5px;
  fill: none;
}

.tetris rect.tetris {
  fill: rgb(238, 238, 238);
  stroke: rgb(238, 238, 238);
  stroke-width: calc(10px*0.8284271247461903); /* 2*rx*(sqrt(2)-1) */
  rx: 10px;
}

.tetris g.device.selected rect.tetris,
.tetris rect.tetris.selected {
  fill: rgb(229, 216, 243) !important;
  stroke: rgb(229, 216, 243) !important;
}

.tetris .port.selected polyline {
  fill: rgb(229, 216, 243) !important;
}

.tetris g.device.nmos rect.tetris,
.tetris g.device.npn rect.tetris {
  fill: rgb(216, 236, 243);
  stroke: rgb(216, 236, 243);
}

.tetris g.device.pmos rect.tetris,
.tetris g.device.pnp rect.tetris {
  fill: rgb(243, 231, 216);
  stroke: rgb(243, 231, 216);
}

.tetris g.device.capacitor rect.tetris,
.tetris g.device.inductor rect.tetris,
.tetris g.device.resistor rect.tetris,
.tetris g.device.diode rect.tetris {
  fill: rgb(216, 243, 226);
  stroke: rgb(216, 243, 226);
}

.tetris g.device.vsource rect.tetris,
.tetris g.device.isource rect.tetris {
  fill: rgb(243, 243, 216);
  stroke: rgb(243, 243, 216);
}

.tetris g.device.port polyline {
  fill: rgb(243, 243, 216);
}

.tetris circle.port {
  fill: rgb(145, 0, 0);
  stroke: rgb(53, 0, 0);
}

.tetris g.device circle.port {
  display: none;
}

.tetris g.device.selected circle.port {
  display: inherit;
}


.tetris g.device polyline,
.tetris g.device circle.outline,
.tetris g.device rect.outline,
.tetris g.device path {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

.tetris line.wire {
  stroke: black;
  stroke-width: 2px;
  fill: none;
}
.tetris circle.wire {
  fill: black;
}
.tetris g.wire.selected line.wire {
  stroke-dasharray: 10px 3px; /* this is not ideal */
}

.tetris circle.nc {
  fill: none;
  stroke: red;
  stroke-dasharray: 1 4;
}

/* eyesore theme */

.eyesore line.grid {
  stroke: lightgray;
  stroke-width: 1px;
  stroke-dasharray: 1 99999;
  stroke-linecap: butt;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.eyesore #mosaic_canvas {
  shape-rendering: crispEdges;
  background-color: black;
}

.eyesore rect.tetris {
  fill: transparent;
}

.eyesore circle.port {
  fill: red;
}

.eyesore circle.nc {
  fill: red;
}


.eyesore text {
  fill: red;
}

.eyesore g.device polyline,
.eyesore g.device path,
.eyesore g.device circle.outline,
.eyesore g.device rect.outline,
.eyesore g.device polygon {
  stroke: #00cc66;
  stroke-width: 1px;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.eyesore g.device.port polyline {
  fill: rgb(255, 0, 0);
  stroke: none;
}
.eyesore g.device.port circle.port {
    fill: none;
}
.eyesore g.device.port.supply polyline,
.eyesore g.device.port.ground polyline {
  stroke: #00cc66;
  fill: transparent;
}

.eyesore g.device text {
  stroke: #00cc66;
  /* stroke-width: 1px; */
  fill: #00cc66;
  vector-effect: non-scaling-stroke;
}

.eyesore line.wire {
  stroke: #39bfff;
  stroke-width: 1px;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.eyesore circle.wire {
  fill: #39bfff;
}

/* Notebook sidebar styles */
#mosaic_notebook {
    display: flex;
    flex-direction: column;
    background: white;
    border-left: 1px solid #ddd;
    transition: width 0.3s ease;
    min-height: 100%;
    position: relative;
    z-index: 2; /* Higher z-index than content */
}

#mosaic_notebook[open] {
    width: 50%;
}

#mosaic_notebook:not([open]) {
    width: 0;
}

#mosaic_notebook summary {
    cursor: pointer;
    background-color: white;
    box-shadow: 0px 0px 8px #0000001A;
    font-weight: 500;
    color: #222222A5;
    user-select: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Collapsed state - vertical text */
#mosaic_notebook:not([open]) summary {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    padding: 1em 0.5em;
    margin-left: -2em;
    border-bottom-left-radius: 5px;
}

/* Expanded state - horizontal text */
#mosaic_notebook[open] summary {
    writing-mode: horizontal-tb;
    padding: 0.5em 1em;
}

#mosaic_notebook summary:hover {
    background-color: lightgray;
}

#mosaic_notebook summary::marker {
    content: none; /* Remove default triangle */
}

/* Notebook triangle positioning - customize as needed */
#mosaic_notebook summary::after {
    top: 6px;
    left: -2px;
}

#mosaic_notebook[open] summary::after {
    top: -2px;
    left: 6px;
}

#mosaic_notebook iframe {
    flex: 1;
    border: none;
    width: 100%;
    height: 100%;
    min-height: 0; /* Allow iframe to shrink */
}

/* Authentication page */
.mosaic-auth {
    background: #f9f9f9;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.mosaic-auth .auth-container,
.mosaic-auth .account-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.mosaic-auth .auth-card,
.mosaic-auth .account-card {
    background: white;
    box-shadow: 0px 0px 8px #00000008;
    border: 0.5px solid #7070701f;
    border-radius: 7px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.mosaic-auth .account-card {
    max-width: 500px;
}

.mosaic-auth .auth-card h1 {
    font: 500 25px/25px 'Roboto', sans-serif;
    letter-spacing: 0.85px;
    color: #222222;
    text-align: center;
    margin-bottom: 30px;
}

.mosaic-auth .form-group {
    margin-bottom: 20px;
}

.mosaic-auth .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #222222A5;
    font-weight: 500;
}

.mosaic-auth .form-group input {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}

.mosaic-auth .form-group input:focus {
    outline: none;
    border-color: #0E1A32;
}

/* Auth-specific button overrides */
.mosaic-auth button.primary,
.mosaic-auth input[type=submit] {
    width: 100%;
    padding: 12px;
    margin: 20px 0;
}

.mosaic-auth button.primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.mosaic-auth button.secondary {
    display: inline-block;
    background: #f8f8f8;
    color: #222222A5;
    text-decoration: none;
    text-align: center;
}

.mosaic-auth button.secondary:hover {
    background-color: lightgray;
}

.mosaic-auth button.danger {
    background: #dc3545;
    color: white;
}

.mosaic-auth button.danger:hover {
    background: #c82333;
}

.mosaic-auth .auth-toggle {
    text-align: center;
    margin-top: 20px;
}

.mosaic-auth .auth-toggle p {
    color: #222222A5;
    margin: 10px 0;
}

.mosaic-auth .auth-toggle a {
    color: #0E1A32;
    text-decoration: none;
    font-weight: 500;
}

.mosaic-auth .auth-toggle a:hover {
    text-decoration: underline;
}

.mosaic-auth .local-option {
    border-top: 1px solid #e7e7e7;
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
}

.mosaic-auth .local-option p {
    color: #222222A5;
    margin-bottom: 15px;
}

.mosaic-auth .error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
}

.mosaic-auth .user-info {
    margin: 20px 0;
}

.mosaic-auth .user-info p {
    margin: 10px 0;
    color: #222222A5;
}

.mosaic-auth .user-info strong {
    color: #222222;
}

.mosaic-auth .user-info code {
    background: #00000008;
    padding: 4px 8px;
    border-radius: 5px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    word-break: break-all;
}

.mosaic-auth .account-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.mosaic-auth .account-actions .button {
    flex: 1;
}