/* ========================================
   WizEIA — Obsidian Dark Theme
   Color tokens:
     bg-primary:  #0F0F0F
     bg-secondary:#1F1F1F
     bg-tertiary: #262626
     border:      #404040
     border-sub:  #262626
     text:        #E5E5E5
     text-muted:  #A3A3A3
     text-faint:  #737373
     accent:      #A78BFA  (violet-400)
     accent-hover:#C4B5FD  (violet-300)
     btn-primary: #7C3AED  (violet-600)
     btn-hover:   #8B5CF6  (violet-500)
   ======================================== */

.seo {
    display: none;
}

/* ----------------------------------------
   Table of contents (circuits page)
   ---------------------------------------- */
.content-body {
    width: 80%;
    padding: 20px;
    flex: 1;
    overflow: auto;
}

#toc a {
    text-decoration: none;
    color: #A78BFA;
}

#toc a:hover {
    text-decoration: underline;
    color: #C4B5FD;
}

#toc .toc-h2 {
    font-weight: 600;
    font-size: 16px;
}

#toc .toc-h3 {
    margin-left: 12px;
    font-weight: normal;
    font-size: 14px;
}

#toc .toc-h4 {
    margin-left: 24px;
    font-weight: normal;
    font-size: 12px;
    color: #A3A3A3;
}

/* ----------------------------------------
   Results table
   ---------------------------------------- */
.q-table--dark {
    background: #0F0F0F !important;
}

.q-table--dark .q-table__top,
.q-table--dark thead th {
    background: #1F1F1F !important;
    color: #E5E5E5 !important;
    font-weight: 600;
    border-bottom: 1px solid #404040 !important;
}

.q-table--dark tbody td {
    color: #E5E5E5 !important;
    border-bottom: 1px solid #262626 !important;
}

.q-table--dark tbody tr:hover td {
    background: #1F1F1F !important;
}

/* ----------------------------------------
   Primary action button (Solve)
   ---------------------------------------- */
.solve-btn {
    background: #7C3AED !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1),
                inset 0 0 0 1px rgb(255 255 255 / 0.1) !important;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.solve-btn:hover {
    background: #8B5CF6 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1),
                inset 0 0 0 1px rgb(255 255 255 / 0.1) !important;
}

.solve-btn:focus-visible {
    outline: 2px solid #7C3AED !important;
    outline-offset: 2px !important;
}

/* ----------------------------------------
   Circuits page — resistor value display
   Fixed width prevents table reflow (and slider flicker) when digit count changes
   ---------------------------------------- */
#resistor1Value, #resistor2Value {
    display: inline-block;
    min-width: 4ch;
    text-align: right;
}

#resistor1, #resistor2 {
    width: 160px;
}

table:has(#resistor1) th {
    text-align: left;
    vertical-align: top;
}

/* ----------------------------------------
   Circuits page — tolerance + distribution selects
   Styled to match the Quasar q-field--dark selects on the home page
   ---------------------------------------- */
#tolerance1, #tolerance2, #distribution {
    background: #1F1F1F;
    color: #E5E5E5;
    border: none;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #404040;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    min-height: 44px;
    cursor: pointer;
    appearance: auto;
    margin-top: 4px;
}

#tolerance1:hover, #tolerance2:hover, #distribution:hover {
    box-shadow: inset 0 0 0 1px #525252;
}

#tolerance1:focus, #tolerance2:focus, #distribution:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px #A78BFA, 0 0 0 3px rgba(124, 58, 237, 0.25);
}

#tolerance1 option, #tolerance2 option, #distribution option {
    background: #1F1F1F;
    color: #E5E5E5;
}

/* ----------------------------------------
   Circuits page — decade table row separators
   ---------------------------------------- */
.row-lines {
    margin-bottom: 16px;
}

.row-lines tr {
    border-bottom: 1px solid #404040;
}

.row-lines th {
    text-align: left;
}

.row-lines th:first-child,
.row-lines td:first-child {
    width: 110px;
}

/* ----------------------------------------
   Circuits page — Calculate button
   ---------------------------------------- */
#calcBtn {
    background: #7C3AED !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 20px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: background 150ms !important;
}

#calcBtn:hover {
    background: #8B5CF6 !important;
}

/* ----------------------------------------
   Header nav hover
   ---------------------------------------- */
.q-header a:hover {
    background: #262626;
    border-radius: 8px;
}

.q-drawer a:hover {
    background: #262626;
}

/* ----------------------------------------
   Obsidian auth-style form layout
   ---------------------------------------- */
.obsidian-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.obsidian-fields {
    gap: 20px !important;
}

.obsidian-row {
    gap: 16px !important;
}

/* Field group: label + control with tight spacing */
.obsidian-group {
    gap: 6px !important;
}

/* Standalone label above input — matches Obsidian auth */
.obsidian-label {
    color: #E5E5E5 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 0 !important;
    user-select: none;
}

/* ----------------------------------------
   Form inputs — Obsidian auth style
   ---------------------------------------- */
.q-field--dark .q-field__control {
    background: #1F1F1F !important;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #404040 !important;
    min-height: 44px !important;
    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.q-field--dark .q-field__control:hover {
    box-shadow: inset 0 0 0 1px #525252 !important;
}

.q-field--dark .q-field__control:focus-within {
    box-shadow: inset 0 0 0 1px #A78BFA, 0 0 0 3px rgba(124, 58, 237, 0.25) !important;
}

.q-field--dark .q-field__native,
.q-field--dark .q-field__input,
.q-field--dark textarea {
    color: #FFFFFF !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
}

.q-field--dark .q-field__native::placeholder,
.q-field--dark .q-field__input::placeholder,
.q-field--dark textarea::placeholder {
    color: #737373 !important;
}

/* Hide Quasar's built-in label (we use .obsidian-label instead) */
.obsidian-field .q-field__label {
    display: none !important;
}

.obsidian-field .q-field__marginal {
    color: #A3A3A3 !important;
}

/* Remove Quasar bottom padding/hints on fields */
.obsidian-field.q-field--with-bottom {
    padding-bottom: 0 !important;
}

.obsidian-field .q-field__bottom {
    display: none;
}

/* Fallback for non-obsidian fields (e.g. other pages) */
.q-field--dark .q-field__label {
    color: #A3A3A3 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Quasar select dropdown */
.q-menu--dark {
    background: #1F1F1F !important;
    border: 1px solid #404040 !important;
    border-radius: 8px !important;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

.q-item--dark:hover,
.q-manual-focusable--focused > .q-focus-helper {
    background: #262626 !important;
}

.q-item--dark.q-item--active {
    color: #A78BFA !important;
}

/* Quasar underline removal — use ring instead */
.q-field--dark .q-field__control::before,
.q-field--dark .q-field__control::after {
    border: none !important;
}

/* ----------------------------------------
   Separators and borders
   ---------------------------------------- */
.q-separator--dark {
    background: #404040 !important;
}

/* ----------------------------------------
   Checkbox
   ---------------------------------------- */
.q-checkbox__label {
    color: #E5E5E5 !important;
}

.q-checkbox__inner--truthy .q-checkbox__bg {
    background: #8B5CF6 !important;
    border-color: #8B5CF6 !important;
}

.q-checkbox__inner .q-checkbox__bg {
    border-color: #404040 !important;
    border-radius: 4px;
}

/* ----------------------------------------
   Donate section
   ---------------------------------------- */
#donate-button-container {
    padding: 1rem 0;
    opacity: 0.85;
    transition: opacity 0.2s;
}

#donate-button-container:hover {
    opacity: 1;
}

/* ----------------------------------------
   Scrollbar — Obsidian style
   ---------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0F0F0F;
}

::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 4px;
}

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

/* ----------------------------------------
   Quasar overrides — accent color
   ---------------------------------------- */
.q-linear-progress__model {
    background: #7C3AED !important;
}

.q-linear-progress__track {
    background: #262626 !important;
}

.q-linear-progress {
    border-radius: 4px !important;
    overflow: hidden;
}

.q-btn--outline {
    color: #A78BFA !important;
    border-color: #404040 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.q-btn--outline:hover {
    background: #262626 !important;
    border-color: #525252 !important;
}

/* ----------------------------------------
   Text selection — Obsidian purple tint
   ---------------------------------------- */
::selection {
    background: hsla(258, 88%, 66%, 0.3);
}