/* ===== Portfolio Common Styles - Retro 90s Aesthetic ===== */

html {
    overflow-x: hidden;
    min-height: 100%;
    background: #c0c0c0;
}

body {
    font-family: "MS Sans Serif", sans-serif;
    font-size: 15px;
    background: #c0c0c0;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-width: 100%;
    align-items: flex-start;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

body.modal-open,
html.modal-open {
    overflow: hidden !important;
}

.classic-modal {
    overscroll-behavior: contain;
}

.classic-modal-overlay {
    touch-action: none;
}

.classic-window {
    overscroll-behavior: contain;
}

.classic-window-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


/*dssd*/
#app {
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
    min-width: 0;
}


/*dssd*/
.portfolio-window {
    background: #c0c0c0;
    border: 2px solid #808080;
    padding: 4px;
    max-width: 1000px;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.title-bar {
    background: linear-gradient(90deg, #0000ff, #000080);
    color: white;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 13px;
    margin: -4px -4px 8px -4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.window-controls {
    display: flex;
    gap: 2px;
}

.window-btn {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}


.portfolio-content {
    background: white;
    border: 1px solid #a0a0a0;
    padding: 12px 40px;
    font-family: "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.4;
}

.portfolio-content h1 {
    font-size: 28px;
    margin: 0 0 8px 0;
    text-decoration: underline;
    color: #800000;
    text-align: center;
}

.portfolio-content h2 {
    font-size: 20px;
    margin: 20px 0 12px 0;
    text-decoration: underline;
    color: #800000;
    background: #ffff80;
    padding: 6px 10px;
    border: 1px solid #000;
}

.portfolio-content h3 {
    font-size: 17px;
    margin: 12px 0 4px 0;
    font-weight: bold;
    color: #000080;
}

.portfolio-content a:link { color: #0000ff; text-decoration: underline; }
.portfolio-content a:visited { color: #800080; text-decoration: underline; }
.portfolio-content a:hover { color: #ff0000; background: #ffff00; }

.portfolio-content p {
    margin: 8px 0;
    text-align: justify;
}

.portfolio-content ul {
    margin: 4px 0 4px 20px;
    padding: 0;
}

.portfolio-content li {
    margin: 2px 0;
}

.portfolio-content hr {
    border: 0;
    height: 1px;
    background: #808080;
    margin: 12px 0;
}

.nav-bar {
    background: #c0c0c0;
    border: 1px inset #c0c0c0;
    padding: 6px 8px;
    margin: 12px 0;
}

.nav-top,
.nav-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.nav-bottom {
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #a0a0a0;
}

.nav-primary,
.nav-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nav-item-group {
    display: inline-flex;
    align-items: center;
}

.nav-form {
    display: inline-flex;
    margin: 0;
}

/* Every nav entry (link or logout button) is one retro button: icon + label.
   `:link`/`:visited` are needed to beat `.portfolio-content a:link`. */
.nav-bar .nav-item,
.nav-bar .nav-item:link,
.nav-bar .nav-item:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 3px 10px;
    font-family: "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: black;
    text-decoration: none;
    background: #c0c0c0;
    border: 2px outset #e0e0e0;
    cursor: pointer;
}

.nav-bar .nav-item:hover,
.nav-bar .nav-item:focus-visible {
    background: #000080;
    color: white;
    border-style: inset;
}

.nav-bar .nav-item:active {
    border-style: inset;
}

.nav-icon {
    font-size: 15px;
    line-height: 1;
}

/* Greeting on the right side of the second row */
.nav-greeting {
    margin-left: auto;
    font-weight: bold;
    color: #000080;
    white-space: nowrap;
}


.profile-section {
    background: #f0f0f0;
    border: 2px inset #c0c0c0;
    padding: 16px;
    margin: 16px 0;
}

/* Keeps profile text block together so "Last Updated" stays aligned on web view */
.profile-info {
    overflow: hidden;
}

.profile-status {
    margin: 0 0 6px;
}

/* Old design used <div style="clear: both; ..."> wrappers around the status bar */
.profile-section-clearfix {
    clear: both;
    margin-top: 12px;
}

.project-content-clearfix {
    clear: both;
}

/* Fun Fact note - old design: yellow box with a black border */
.fun-fact-box {
    background: #ffffe0;
    border: 1px solid #000;
    padding: 8px;
    margin: 8px 0;
    font-style: italic;
}

.profile-pic {
    float: left;
    margin: 0 16px 12px 0;
    border: 2px inset #c0c0c0;
    width: auto;
    height: auto;
    background: #0a0a0a;
    color: #33ff66;
    overflow: hidden;
    padding: 6px 8px 4px;
    box-sizing: border-box;
}

.profile-pic pre {
    margin: 0;
    padding: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 5.4px;
    line-height: 1.08;
    letter-spacing: 0;
    white-space: pre;
    color: inherit;
    background: transparent;
}

.status-bar {
    background: #008080;
    color: white;
    padding: 6px 10px;
    margin: 8px 0;
    font-family: "Courier New", monospace;
    font-size: 14px;
    border: 1px solid #000;
}

.project-window {
    background: #c0c0c0;
    border: 2px outset #c0c0c0;
    margin: 16px 0;
    padding: 4px;
}

.project-title-bar {
    background: linear-gradient(90deg, #800080, #400040);
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 14px;
    margin: -4px -4px 4px -4px;
}

.project-content {
    background: white;
    border: 1px solid #a0a0a0;
    padding: 12px;
    font-size: 15px;
}

.project-icon {
    float: left;
    width: 32px;
    height: 32px;
    background: #c0c0c0;
    border: 1px inset #c0c0c0;
    margin: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.skill-box {
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
    padding: 8px;
}

.skill-box h4 {
    margin: 0 0 8px 0;
    color: #800000;
    text-decoration: underline;
    font-size: 15px;
}

.skill-list {
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.skill-list li {
    background: #ffff80;
    border: 1px solid #000;
    margin: 2px 0;
    padding: 1px 4px;
    display: inline-block;
    margin-right: 4px;
}

.experience-item {
    background: #f0f0f0;
    border: 2px inset #c0c0c0;
    padding: 12px;
    margin: 12px 0;
    position: relative;
}

.job-title {
    font-weight: bold;
    color: #000080;
    font-size: 16px;
}

.company {
    color: #800000;
    font-style: italic;
}

.date {
    font-style: italic;
    color: #808080;
    font-size: 14px;
    float: right;
}

.blink {
    animation: blink 1s infinite;
}

.host-offline {
    color: #808080;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.marquee {
    background: #000080;
    color: #00ff00;
    padding: 6px;
    margin: 8px 0;
    font-family: "Courier New", monospace;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #000;
}

.marquee span {
    display: inline-block;
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.counter {
    background: #000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    font-size: 14px;
    padding: 2px 4px;
    display: inline-block;
    border: 1px inset #c0c0c0;
}

.guestbook {
    background: #ffffe0;
    border: 2px inset #c0c0c0;
    padding: 12px;
    margin: 16px 0;
}

.guestbook-title {
    background: #800080;
    color: white;
    padding: 4px 8px;
    margin: -12px -12px 8px -12px;
    font-weight: bold;
    font-size: 15px;
}

.webring {
    background: #ffff00;
    border: 2px solid #ff0000;
    padding: 10px;
    margin: 16px 0;
    text-align: center;
    font-size: 14px;
}

.webring a {
    background: #c0c0c0;
    border: 1px outset #c0c0c0;
    padding: 2px 6px;
    text-decoration: none;
    color: black;
    margin: 0 4px;
}

.webring a:hover {
    border: 1px inset #c0c0c0;
}

.portfolio-footer {
    text-align: center;
    margin-top: 20px;
    padding: 14px;
    border-top: 1px solid #808080;
    font-size: 14px;
    color: #808080;
    background: #f0f0f0;
}

.app-version {
    font-size: 11px;
    color: #a0a0a0;
}

.construction {
    background: #ffff00;
    border: 2px solid #ff0000;
    padding: 4px;
    text-align: center;
    margin: 8px 0;
    color: red;
    font-weight: bold;
    animation: blink 1.5s infinite;
}

.new-gif {
    background: #ff0000;
    color: white;
    font-size: 10px;
    padding: 1px 3px;
    margin-left: 4px;
    animation: blink 0.5s infinite;
}

.center { text-align: center; }

.portfolio-content b { color: #800000; }

/* Retro form styles (Login, Register, etc.) */
.retro-form .form-group {
    margin: 12px 0;
}

.retro-form label {
    display: block;
    font-weight: bold;
    color: #800000;
    margin-bottom: 4px;
}

.retro-form input[type="text"],
.retro-form input[type="email"],
.retro-form input[type="password"] {
    width: 100%;
    max-width: 100%;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px inset #808080;
    background: white;
    font-family: "MS Sans Serif", sans-serif;
    box-sizing: border-box;
}

.retro-form input:focus {
    outline: 1px dotted #000;
}

.retro-form .custom-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.retro-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #000080;
}

.retro-form .validation-summary-errors {
    background: #ffffe0;
    border: 2px solid #ff0000;
    padding: 8px;
    margin-bottom: 12px;
    color: #800000;
}

.retro-form .field-validation-error {
    color: #ff0000;
    font-size: 12px;
}

/* Validation / error message text - reusable across all forms and modals (Edit, EditSpecialization, etc.) */
.text-danger,
.field-validation-error,
span[data-valmsg-for].field-validation-error {
    color: #ff0000 !important;
    font-size: 12px;
    margin-top: 2px;
    display: block;
    font-weight: normal;
}

/* Form table (Specialization Editor) - in site.css so modal loaded via AJAX gets correct styles */
.formTable {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 12px;
    background-color: #ffffff;
    border: 2px outset #ffffff;
    border-bottom-color: #404040;
    border-right-color: #404040;
    box-sizing: border-box;
}

.formTable .col-title { width: 40%; }
.formTable .col-description { width: auto; }
.formTable .col-shown { width: 72px; text-align: center; }
.formTable .col-actions { width: 76px; text-align: center; }

.formTable tbody td.col-shown-cell {
    text-align: left;
    padding-left: 6px;
    padding-right: 4px;
}

.formTable .row-shown-option {
    display: block;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    cursor: pointer;
}

.formTable thead {
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
    border-bottom: 2px solid #404040;
}

.formTable thead th {
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    border: 1px solid #808080;
    border-bottom-color: #404040;
}

.formTable thead th.col-description {
    font-size: 16px;
    font-weight: bold;
}

.formTable tbody td,
.formTable tbody th {
    padding: 8px 10px;
    border: 1px solid #a0a0a0;
    vertical-align: middle;
    box-sizing: border-box;
}

.formTable tbody td:nth-child(3),
.formTable tbody td:last-child {
    white-space: nowrap;
}

/* Stays a real table cell (not flex) so it stretches to the row height like the other cells */
.formTable .col-title-cell {
    white-space: nowrap;
}

.formTable .col-title-cell .title-input-wrap {
    display: inline-block;
    width: calc(100% - 66px);
    vertical-align: middle;
    white-space: normal;
}

.formTable .col-title-cell .title-input-wrap input.form-control {
    width: 100%;
}

.formTable tbody tr { background-color: #ffffff; }
.formTable tbody tr:nth-child(even) { background-color: #f8f8f8; }
.formTable tbody tr:hover { background-color: #e8f0fe; }

.formTable input[type="text"].form-control {
    width: 100%;
    min-height: 24px;
    height: 24px;
    padding: 4px 6px;
    border: 2px inset #c0c0c0;
    font-size: 13px;
    font-family: "Courier New", monospace;
    background: #fff;
    box-sizing: border-box;
}

.formTable textarea.form-control {
    width: 100%;
    min-height: 44px;
    height: 44px;
    max-height: 120px;
    padding: 4px 6px;
    border: 2px inset #c0c0c0;
    font-size: 13px;
    font-family: "Courier New", monospace;
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
}

.formTable .classic-btn-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 3px;
    vertical-align: middle;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 100%);
    cursor: pointer;
}

.formTable .classic-btn-icon:first-child { margin-left: 0; }

.formTable .classic-btn-icon:hover {
    background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 100%);
    border-style: outset;
}

.formTable .classic-btn-icon:active {
    border: 2px inset #404040;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    background: #c0c0c0;
}

.formTable .classic-btn-icon .classic-icon {
    display: block;
    color: #000;
}

.formTable .classic-btn-icon:hover .classic-icon {
    color: #000080;
}

/* About Me editor textarea - make it fill most of the popup */
#popupBody #aboutme-form .classic-field textarea {
    min-height: 40vh;
}

@media (max-width: 768px) {
    #popupBody #aboutme-form .classic-field textarea {
        min-height: 30vh;
    }
}

@media (max-width: 480px) {
    #popupBody #aboutme-form .classic-field textarea {
        min-height: 25vh;
    }
}

/* Row drag handle and reorder states (serial number in Title column) */
.formTable .col-title-cell.SerialNumber {
    white-space: nowrap;
}

.formTable .row-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    padding: 2px 4px;
    margin-right: 4px;
    color: #606060;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
}

.formTable .row-drag-handle:active {
    cursor: grabbing;
}

.formTable .row-drag-handle:hover {
    color: #000080;
}

.formTable .row-num {
    display: inline-block;
    width: 26px;
    text-align: right;
    vertical-align: middle;
}

.formTable tbody tr.formTable-dragging {
    opacity: 0.6;
    background-color: #e8f0fe !important;
}

.formTable tbody tr.formTable-drop-target {
    border-top: 2px solid #000080;
    background-color: #e0e8ff !important;
}

#specialization-form {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.formTable-wrapper {
    max-width: 100%;
    max-height: 55vh;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Portfolio List (Admin) - card layout, retro 90s ===== */
.portfolio-list-page.portfolio-window {
    max-width: 100%;
}

.portfolio-list-page .portfolio-content {
    padding: 12px 16px;
}

/* Override default portfolio-content link styles so Add/Edit look like buttons */
.portfolio-list-page .portfolio-content a.classic-btn {
    color: #000;
    text-decoration: none;
}

.portfolio-list-page .portfolio-content a.classic-btn:hover {
    color: #000;
    background: #a0a0a0;
}

.portfolio-list-actions {
    margin-bottom: 16px;
}

.portfolio-list-actions .classic-btn {
    display: inline-block;
    min-width: 130px;
    padding: 4px 12px;
    font-size: 13px;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    background: #c0c0c0;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    font-family: "MS Sans Serif", sans-serif;
}

.portfolio-list-actions .classic-btn:hover {
    background: #a0a0a0;
    border-color: #808080;
    color: #000;
}

.portfolio-list-actions .classic-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.portfolio-list-actions .classic-btn.primary {
    font-weight: bold;
}

.portfolio-list-empty {
    margin: 12px 0;
    color: #404040;
    font-style: italic;
}

.portfolio-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.portfolio-card {
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
    font-family: "MS Sans Serif", sans-serif;
}

.portfolio-card-header {
    background: linear-gradient(180deg, #7a9aba 0%, #a8c4e0 100%);
    color: #1a1a1a;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #808080;
}

.portfolio-card-id {
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    font-size: 11px;
    min-width: 28px;
    text-align: center;
    border: 1px solid #909090;
    color: #1a1a1a;
}

.portfolio-card-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-card-body {
    padding: 10px 12px;
    background: #e8e8e8;
    border: 1px inset #808080;
    margin: 4px;
}

.portfolio-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.portfolio-card-actions .classic-btn {
    min-width: 70px;
    padding: 4px 10px;
    font-size: 12px;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    background: #c0c0c0;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    font-family: "MS Sans Serif", sans-serif;
}

.portfolio-card-actions .classic-btn:hover {
    background: #a0a0a0;
    border-color: #808080;
}

.portfolio-card-actions form.portfolio-card-delete-form {
    display: inline;
}

.portfolio-card-actions form.portfolio-card-delete-form button {
    min-width: 70px;
    padding: 4px 10px;
    font-size: 12px;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    background: #c0c0c0;
    cursor: pointer;
    font-family: "MS Sans Serif", sans-serif;
}

.portfolio-card-actions form.portfolio-card-delete-form button:hover {
    background: #a0a0a0;
}

.portfolio-card-meta {
    margin-bottom: 8px;
    font-size: 12px;
    color: #404040;
}

.portfolio-card-badge {
    background: #000080;
    color: #ffffff;
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid #ffffff;
}

/* Show/Hide tooltip used by every admin card list */
.portfolio-card-actions form {
    position: relative;
}

.portfolio-hide-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 15;
    min-width: 170px;
    padding: 8px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
}

.portfolio-hide-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.portfolio-hide-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .portfolio-card-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-card-title {
        white-space: normal;
    }
}

/* Specialization Editor & form table - mobile responsive */
@media (max-width: 768px) {
    .classic-modal .classic-window {
        width: 98% !important;
        max-width: 98% !important;
        margin: 0 1%;
    }

    .classic-modal .classic-window-body {
        padding: 8px !important;
    }

    .formTable-wrapper {
        margin: 0 -4px;
        max-height: 50vh;
    }

    .formTable {
        min-width: 340px;
    }

    .formTable thead th {
        padding: 5px 6px;
        font-size: 12px;
    }

    .formTable thead th.col-description {
        font-size: 14px;
    }

    .formTable tbody td,
    .formTable tbody th {
        padding: 6px;
        font-size: 12px;
    }

    .formTable input[type="text"].form-control,
    .formTable textarea.form-control {
        font-size: 12px;
        padding: 3px 5px;
    }

    .formTable .classic-btn-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        margin-left: 2px;
    }

    #specialization-form .classic-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .classic-modal .classic-window {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
    }

    .classic-modal .classic-window-body {
        padding: 6px !important;
    }

    .formTable-wrapper {
        max-height: 45vh;
    }

    .formTable {
        min-width: 300px;
    }

    .formTable .col-title { width: 35%; }
    .formTable .col-shown { width: 54px; }
    .formTable .col-actions { width: 42px; }

    .formTable thead th.col-description {
        font-size: 12px;
    }

    .formTable thead th.col-shown,
    .formTable thead th.col-actions {
        padding-left: 2px;
        padding-right: 2px;
        font-size: 10px;
        overflow: hidden;
    }

    .formTable tbody td.col-shown-cell,
    .formTable tbody td:last-child {
        padding-left: 4px;
        padding-right: 4px;
    }

    .formTable tbody td:last-child .classic-btn-icon,
    .formTable tbody td:last-child .classic-btn-icon:first-child {
        display: flex;
        margin: 2px auto;
    }
}

/* HTML5 drag-and-drop doesn't work with touch, so the handle only takes space there */
@media (hover: none) {
    .formTable .row-drag-handle { display: none; }
    .formTable .col-title-cell .title-input-wrap { width: calc(100% - 34px); }
}

.login-window {
    background: #c0c0c0;
    border: 2px outset #c0c0c0;
    margin: 16px 0;
    padding: 4px;
}

.login-window .login-title-bar {
    background: linear-gradient(90deg, #0000ff, #000080);
    color: white;
    padding: 6px 10px;
    font-weight: bold;
    font-size: 14px;
    margin: -4px -4px 8px -4px;
}

.login-window .login-content {
    background: #ffffe0;
    border: 1px inset #c0c0c0;
    padding: 16px;
}

/* Retro button styles */
.retro-btn {
    background: #c0c0c0;
    border: 2px outset #c0c0c0;
    padding: 6px 14px;
    font-family: "MS Sans Serif", sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin: 4px;
    text-decoration: none;
    color: black;
    display: inline-block;
}

.retro-btn:hover {
    border: 2px inset #c0c0c0;
    background: #808080;
    color: white;
}

.stats-table {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    margin: 8px 0;
}

.stats-table th,
.stats-table td {
    border: 1px solid #000;
    padding: 4px;
    text-align: left;
}

.stats-table th {
    background: #c0c0c0;
    font-weight: bold;
}

.stats-section {
    width: 100%;
}

.stats-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    html, body {
        min-width: 100%;
        background: #c0c0c0;
    }

    body {
        padding: 12px 0;
        align-items: stretch;
    }

    #app {
        padding: 0 8px;
    }

    .portfolio-window {
        max-width: 100%;
        margin: 0;
        border-left: 2px solid #808080;
        border-right: 2px solid #808080;
    }

    .title-bar {
        font-size: 11px;
        padding: 6px 4px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .title-bar span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portfolio-content {
        padding: 12px 16px;
        font-size: 15px;
    }

    .portfolio-content h1 {
        font-size: 22px;
        margin: 0 0 8px 0;
        word-wrap: break-word;
    }

    .portfolio-content h2 {
        font-size: 18px;
        margin: 16px 0 10px 0;
        padding: 6px 8px;
        word-wrap: break-word;
    }

    .portfolio-content h3 {
        font-size: 14px;
    }

    .nav-bar {
        padding: 6px 4px;
    }

    .nav-primary,
    .nav-secondary {
        justify-content: center;
    }

    .nav-bottom {
        justify-content: center;
    }

    .nav-greeting {
        margin-left: 0;
        flex-basis: 100%;
        text-align: center;
    }

    .nav-bar .nav-item,
    .nav-bar .nav-item:link,
    .nav-bar .nav-item:visited {
        padding: 4px 8px;
        font-size: 13px;
    }

    .profile-section {
        padding: 12px;
        margin: 12px 0;
    }

    .profile-pic {
        float: none;
        display: block;
        width: fit-content;
        height: auto;
        margin: 0 auto 12px;
    }

    .profile-pic pre {
        font-size: 4.6px;
    }

    .status-bar {
        font-size: 13px;
        padding: 6px 8px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .project-window {
        margin: 12px 0;
    }

    .project-title-bar {
        font-size: 11px;
        padding: 6px 8px;
        word-wrap: break-word;
    }

    .project-content {
        padding: 10px;
        font-size: 14px;
    }

    .project-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .skill-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .skill-box h4 {
        font-size: 14px;
    }

    .skill-list li {
        margin: 2px 4px 2px 0;
    }

    .experience-item {
        padding: 10px;
        margin: 10px 0;
    }

    .experience-item .date {
        float: none;
        display: block;
        margin-bottom: 4px;
        text-align: left;
    }

    .job-title {
        font-size: 14px;
    }

    .marquee {
        font-size: 12px;
        padding: 6px 4px;
    }

    .construction {
        font-size: 12px;
        padding: 6px 4px;
    }

    .guestbook input[type="text"],
    .guestbook input[type="email"],
    .guestbook textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .stats-section {
        width: 100%;
        overflow: hidden;
    }

    .stats-section h2 {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .stats-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stats-table {
        font-size: 13px;
        width: 100%;
        min-width: 280px;
    }

    .stats-table th,
    .stats-table td {
        padding: 6px 8px;
        white-space: nowrap;
    }

    .webring {
        padding: 10px 8px;
        font-size: 11px;
    }

    .webring a {
        display: inline-block;
        margin: 4px;
    }

    .portfolio-footer {
        padding: 12px 8px;
        font-size: 13px;
    }

    .retro-btn {
        padding: 6px 12px;
        font-size: 13px;
        margin: 4px 2px;
    }

    .center {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    body {
        padding: 8px 0;
    }

    #app {
        padding: 0 6px;
    }

    .title-bar span {
        font-size: 11px;
    }

    .portfolio-content {
        padding: 10px 12px;
        font-size: 14px;
    }

    .portfolio-content h1 {
        font-size: 20px;
    }

    .portfolio-content h2 {
        font-size: 16px;
        padding: 6px;
    }

    .nav-bar .nav-item,
    .nav-bar .nav-item:link,
    .nav-bar .nav-item:visited {
        font-size: 12px;
        padding: 4px 6px;
    }

    .profile-pic {
        width: fit-content;
        height: auto;
    }

    .profile-pic pre {
        font-size: 3.8px;
    }
}

/* ===== Rich text (editor + rendered content) ===== */
.rich-content h1,
.rich-content h2,
.rich-content h3,
.portfolio-content .rich-content h1,
.portfolio-content .rich-content h2,
.portfolio-content .rich-content h3 {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    color: #800000;
    font-weight: bold;
}

.rich-content h1, .portfolio-content .rich-content h1 { font-size: 1.5em; margin: 0.5em 0 0.3em; }
.rich-content h2, .portfolio-content .rich-content h2 { font-size: 1.3em; margin: 0.5em 0 0.3em; }
.rich-content h3, .portfolio-content .rich-content h3 { font-size: 1.15em; margin: 0.5em 0 0.3em; color: #000080; }

.rich-content p, .portfolio-content .rich-content p { margin: 0 0 0.6em; }
.rich-content ul, .rich-content ol { margin: 0 0 0.6em; padding-left: 1.6em; }

.rich-content pre, .rich-content .code-block {
    background: #1e1e1e;
    color: #dcdcdc;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    padding: 8px 12px;
    border: 2px inset #808080;
    border-radius: 0;
    overflow-x: auto;
    margin: 0.5em 0 0.8em;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.rich-content pre code, .rich-content .code-block code {
    background: transparent;
    color: inherit;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
}

.rich-content code, .rich-content .inline-code {
    background: #e8e8e8;
    color: #800000;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    padding: 1px 4px;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
}

.rich-content blockquote, .rich-content .rich-quote {
    margin: 0.5em 0 0.8em;
    padding: 6px 12px;
    border-left: 4px solid #000080;
    background: #f4f4f4;
    color: #333333;
    font-style: italic;
}

.rich-content table {
    border-collapse: collapse;
    margin: 0.4em 0 0.8em;
    max-width: 100%;
}

.rich-content th,
.rich-content td {
    border: 1px solid #808080;
    padding: 4px 8px;
    min-width: 40px;
    vertical-align: top;
    text-align: left;
}

.rich-content th { background: #c0c0c0; }

.rich-content-wrapper { overflow-x: auto; }

.rich-editor {
    width: 100%;
    box-sizing: border-box;
    border: 2px inset #808080;
    background: #ffffff;
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
}

.rich-editor .re-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 26px;
    height: 24px;
    padding: 0 5px;
    background: #c0c0c0;
    color: #000;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    font: 13px "Times New Roman", serif;
    cursor: default;
}

/* Code block language picker (rich-editor.js, only when the textarea has data-code-languages). */
.rich-editor .re-code-lang {
    height: 24px;
    max-width: 120px;
    padding: 0 2px;
    background: #fff;
    border: 2px inset #c0c0c0;
    font: 12px "Times New Roman", serif;
}
.rich-editor .re-code-lang[hidden] { display: none; }

.rich-editor .re-btn:active,
.rich-editor .re-btn.active {
    border-top-color: #404040;
    border-left-color: #404040;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    background: #d8d8d8;
}

.rich-editor .re-caret { font-size: 9px; }
.rich-editor .re-block-label { font-weight: bold; min-width: 18px; text-align: left; }

.rich-editor .re-sep {
    width: 1px;
    height: 20px;
    margin: 0 3px;
    background: #808080;
    box-shadow: 1px 0 0 #ffffff;
}

.rich-editor .re-dropdown { position: relative; }

.rich-editor .re-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 170px;
    padding: 2px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: 2px 2px 0 #000;
}

.rich-editor .re-menu.open { display: block; }

.rich-editor .re-menu button {
    display: block;
    width: 100%;
    padding: 3px 8px;
    border: 0;
    background: none;
    color: #000;
    text-align: left;
    font: 13px "Courier New", monospace;
    cursor: default;
}

.rich-editor .re-menu button:hover:not(:disabled) { background: #000080; color: #fff; }
.rich-editor .re-menu button:disabled { color: #808080; }
.rich-editor .re-menu .re-menu-h1 { font-size: 17px; font-weight: bold; }
.rich-editor .re-menu .re-menu-h2 { font-size: 15px; font-weight: bold; }
.rich-editor .re-menu .re-menu-h3 { font-size: 13px; font-weight: bold; }

.rich-editor .re-menu-sep {
    height: 1px;
    margin: 3px 2px;
    background: #808080;
    box-shadow: 0 1px 0 #ffffff;
}

.rich-editor .re-grid-label { padding: 2px 4px; font-size: 12px; text-align: center; }

.rich-editor .re-grid {
    display: grid;
    grid-template-columns: repeat(6, 16px);
    gap: 2px;
    justify-content: center;
    padding: 2px 4px 4px;
}

.rich-editor .re-grid span {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid #808080;
    background: #ffffff;
}

.rich-editor .re-grid span.on { background: #000080; border-color: #000080; }

.rich-editor-content {
    min-height: 200px;
    max-height: 50vh;
    overflow: auto;
    padding: 6px 8px;
    outline: none;
    font: 15px "Times New Roman", serif;
    color: #000;
    text-align: left;
}

.rich-editor-content a { color: #0000ff; text-decoration: underline; }

/* ===== Job Tracker (Admin: Jobs, Companies, Reminders) ===== */
/* Global (not scoped) because card partials are swapped in by AJAX. */
.jt-page .portfolio-content a.classic-btn { color: #000; text-decoration: none; }

.jt-muted { color: #606060; }
.jt-text-overdue { color: #b00000; font-weight: bold; }
.jt-text-today { color: #8a5a00; font-weight: bold; }

.jt-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.jt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 76px;
    padding: 4px 8px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    color: #000 !important;
    text-decoration: none !important;
    font-family: "MS Sans Serif", sans-serif;
}

.jt-stat:hover { background: #d4d4d4; }
.jt-stat.empty { color: #808080 !important; }

.jt-stat.active {
    border: 2px inset #ffffff;
    border-top-color: #404040;
    border-left-color: #404040;
    background: #e8e8e8;
}

.jt-stat-count { font-size: 18px; font-weight: bold; }
.jt-stat-label { font-size: 11px; white-space: nowrap; }

.jt-reminder-panel {
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #ffffe0;
    border: 1px inset #808080;
    font-size: 13px;
}

.jt-panel-title { font-weight: bold; }
.jt-panel-link { margin-left: 8px; font-weight: normal; }
.jt-panel-empty { margin: 6px 0 0; }

.jt-due-list {
    margin: 6px 0 0;
    padding-left: 18px;
}

.jt-due-list li { margin: 2px 0; }
.jt-due-when { white-space: nowrap; }
.jt-due-title { font-weight: bold; }

.jt-group-overdue .jt-due-when { color: #b00000; font-weight: bold; }
.jt-group-today .jt-due-when { color: #8a5a00; font-weight: bold; }

.jt-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
}

.jt-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.jt-filter-row-top select {
    flex: 1 1 140px;
    min-width: 130px;
}

.jt-filter select,
.jt-filter input[type="search"],
.jt-filter input[type="date"],
.jt-select {
    height: 28px;
    border: 2px inset #808080;
    background: #ffffff;
    padding: 2px 6px;
    font-size: 13px;
    font-family: "Courier New", monospace;
    box-sizing: border-box;
    vertical-align: middle;
}

.jt-filter-dates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-family: "MS Sans Serif", sans-serif;
    flex: 0 0 auto;
    white-space: nowrap;
    height: 28px;
}

.jt-filter-dates label {
    margin: 0;
    font-size: 13px;
    color: #000;
}

.jt-filter input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 125px;
    height: 28px;
    text-align: left;
}

.jt-filter input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: left; }

.jt-filter-row-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.jt-filter-row-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.jt-filter-row-search .jt-page-size { flex: 0 0 auto; width: auto; }

.jt-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
}

.jt-pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.jt-pager-links .classic-btn { min-width: 32px; text-align: center; text-decoration: none; color: #000; }
.jt-pager-current { font-weight: bold; box-shadow: inset 1px 1px #000, inset -1px -1px #fff; }

@media (max-width: 600px) {
    .jt-pager { justify-content: center; }
}

.jt-filter .classic-btn {
    height: 28px;
    padding: 0 16px;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    background: #c0c0c0;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    font-family: "MS Sans Serif", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    flex: 0 0 auto;
}

.jt-page .portfolio-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.jt-page .portfolio-list-actions .classic-btn {
    height: 28px;
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    font-family: "MS Sans Serif", sans-serif;
    font-size: 13px;
    line-height: 1;
}

.jt-status-badge,
.jt-type-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #404040;
    background: #ffffff;
    color: #000;
    white-space: nowrap;
}

.jt-type-badge { font-weight: normal; background: #e0e0ff; }

.jt-status-saved { background: #e0e0e0; }
.jt-status-applied { background: #cfe2ff; }
.jt-status-screening,
.jt-status-assessment { background: #fff3c4; }
.jt-status-interview { background: #ffd9a8; }
.jt-status-offer { background: #c8f0c8; }
.jt-status-accepted { background: #008000; color: #ffffff; }
.jt-status-rejected { background: #ffc8c8; }
.jt-status-withdrawn,
.jt-status-noresponse { background: #d8d8d8; color: #404040; }

.jt-card-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.jt-company { margin-bottom: 6px; font-size: 13px; }

.portfolio-content .jt-facts {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    font-size: 12px;
}

.jt-facts li { margin: 2px 0; overflow-wrap: anywhere; }
.jt-fact-label { color: #404040; font-weight: bold; }

.jt-next-reminder {
    margin-bottom: 8px;
    padding: 4px 6px;
    font-size: 12px;
    background: #ffffff;
    border: 1px solid #a0a0a0;
}

.jt-next-reminder.jt-group-overdue { border-color: #b00000; background: #fff0f0; }
.jt-next-reminder.jt-group-today { border-color: #c08000; background: #fffbe6; }

/* Reminders page */
.portfolio-content .jt-group-heading {
    margin: 14px 0 6px;
    padding: 2px 6px;
    font-size: 14px;
    background: #000080;
    color: #ffffff;
}

.portfolio-content .jt-group-heading.jt-group-overdue { background: #b00000; }
.portfolio-content .jt-group-heading.jt-group-today { background: #8a5a00; }
.portfolio-content .jt-group-heading.jt-group-done,
.portfolio-content .jt-group-heading.jt-group-dismissed { background: #606060; }

.jt-reminder-list .jt-pager { margin: 6px 0 4px; }
.jt-reminder-list .jt-group-heading { scroll-margin-top: 8px; }

.jt-reminder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 8px;
    background: #e8e8e8;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    font-size: 13px;
}

.jt-reminder.jt-group-overdue { background: #fff0f0; }
.jt-reminder.jt-group-done,
.jt-reminder.jt-group-dismissed { opacity: 0.65; }

.jt-reminder-main { flex: 1 1 320px; min-width: 0; }
.jt-reminder-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; font-size: 12px; }
.jt-reminder-note { margin-top: 4px; font-size: 12px; white-space: pre-line; }
.jt-reminder-state { color: #404040; font-weight: bold; }

.jt-snooze { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.portfolio-card-actions .classic-btn.jt-btn-small { min-width: 0; padding: 2px 6px; }

.jt-toggle-active { border-style: inset !important; }

/* Popups */
.jt-popup-subtitle { margin: 0 0 8px; }

.jt-fieldset {
    margin: 0 0 10px;
    padding: 6px 10px 8px;
    border: 2px groove #ffffff;
}

.jt-fieldset legend { padding: 0 4px; font-weight: bold; }

.jt-field-row {
    display: flex;
    gap: 12px;
}

.jt-field-row .classic-field { flex: 1; min-width: 0; }

/* Job preview popup (read-only) */
.jt-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.jt-preview-title { margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }

.jt-preview-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0 0 8px;
}

.jt-preview-grid dt,
.jt-preview-label { font-weight: bold; color: #404040; }
.jt-preview-grid dd { margin: 0; overflow-wrap: anywhere; }

.jt-preview-notes,
.jt-preview-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.jt-preview-notes { margin: 2px 0 0; }

.jt-preview-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 13px;
}

.jt-preview-table th,
.jt-preview-table td {
    padding: 4px 6px;
    border: 1px solid #a0a0a0;
    text-align: left;
    vertical-align: top;
}

.jt-preview-table th { background: #d4d0c8; }
.jt-preview-table tr.jt-group-overdue { background: #fff0f0; }
.jt-preview-table tr.jt-group-today { background: #fffbe6; }
.jt-preview-table tr.jt-group-done,
.jt-preview-table tr.jt-group-dismissed { opacity: 0.65; }

.jt-preview-description summary,
.jt-preview-email summary { cursor: pointer; color: #000080; }
.jt-preview-description > div { max-height: 360px; margin-top: 4px; padding: 6px; overflow-y: auto; background: #ffffff; border: 2px inset #ffffff; }
.jt-email-body { margin-top: 4px; padding: 6px 8px; background: #fffff0; border: 1px dashed #a0a0a0; }
.jt-email-body p { margin: 0 0 8px; }
.jt-follow-up-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.jt-preview-table tr.jt-email-received td { background: #eef4ff; }
.jt-email-row-actions { display: flex; gap: 4px; margin-top: 4px; }
.jt-email-row-actions .classic-btn { padding: 1px 6px; min-width: 0; }

/* Write email / Log received email: inline forms inside the preview's Emails section */
.jt-email-panel { margin: 0 0 10px; padding: 8px 10px; background: #f0f0f0; border: 2px groove #ffffff; }
.jt-email-panel[hidden] { display: none; }
.jt-email-form-title { margin: 0 0 8px; font-size: 1em; color: #000080; }
.jt-email-to { display: grid; grid-template-columns: 3fr 2fr; gap: 0 12px; }
.jt-email-quote { margin: 0 0 10px; }
.jt-email-quote .jt-email-body { max-height: 220px; overflow-y: auto; }
.jt-email-idea { padding: 6px 8px; background: #f4f4ff; border: 1px dashed #8080c0; }
.jt-email-idea-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.jt-email-signature { margin: -4px 0 8px; font-size: 0.9em; }
.jt-email-signature pre { margin: 2px 0 0; padding: 4px 8px; font-family: inherit; white-space: pre-wrap; background: #ffffff; border: 1px dashed #a0a0a0; }
#email-compose-form .jt-ai-filled { background-color: #e6ffe6; }
@media (max-width: 600px) {
    .jt-email-to { grid-template-columns: 1fr; }
}

/* Job editor: auto follow-up */
.jt-description { min-height: 140px; }
.formTable.jt-form-table th.jt-col-auto,
.formTable.jt-form-table td.jt-cell-auto { width: 100px; text-align: center; }
/* Two-line header ("Auto / follow-up") so it never spills into the Actions column */
.formTable.jt-form-table thead th.jt-col-auto { padding: 4px; white-space: normal; line-height: 1.2; }
.formTable.jt-form-table td.jt-cell-auto { white-space: nowrap; }
.jt-auto-check { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.jt-follow-up-max { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.jt-follow-up-max label { margin: 0; }
.classic-field.jt-follow-up-max label { width: auto; }
.classic-field.jt-follow-up-max input[type="number"] { width: 80px !important; margin: 0; }
.jt-follow-up-max .text-danger { flex-basis: 100%; }

.classic-field .jt-select { width: 100%; box-sizing: border-box; }
.classic-field textarea.jt-notes { min-height: 60px; }

.jt-checkbox { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.jt-hint { margin: 4px 0 0; font-size: 12px; }

/* AI "Fill from link": green = read from the post, yellow = placeholder to review. */
.jt-ai-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.jt-ai-fill-hint { font-size: 12px; }
.js-ai-fill.is-busy { cursor: progress; color: #808080; }
#job-form .jt-ai-filled { background-color: #e6ffe6; }
#job-form .jt-ai-default { background-color: #fff8c4; }
.jt-visit-link { display: inline-block; margin-top: 3px; font-size: 12px; color: #0000ee; }
.jt-ai-paste { margin: 6px 0 8px; padding: 8px; border: 1px inset #808080; background: #d4d4d4; }
.jt-ai-paste label { display: block; font-weight: bold; margin-bottom: 4px; }
.jt-ai-paste textarea { width: 100%; box-sizing: border-box; }

/* Duplicate check: banner in the job editor, Save warning dialog, "Also posted on" links. */
/* Sticky: stays at the top of the popup while the long form scrolls under it. */
.jt-duplicate-banner { position: sticky; top: 0; z-index: 5; max-height: 35vh; overflow-y: auto; margin: 0 0 8px; padding: 6px 8px; border: 1px solid #808080; background: #eef3ff; font-size: 13px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
#popupContainer .jt-duplicate-banner { top: -12px; } /* covers the popup body's 12px padding, so text doesn't show above it */
.jt-duplicate-banner.is-likely { background: #fff8c4; border-color: #b8860b; }
.jt-duplicate-banner.is-new { animation: jt-duplicate-flash 0.6s ease-in-out 3; }
.jt-duplicate-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-weight: bold; text-align: left; cursor: pointer; }
.jt-duplicate-banner.is-collapsed ul, .jt-duplicate-banner.is-collapsed .jt-duplicate-note { display: none; }
@keyframes jt-duplicate-flash { 50% { background: #ffd966; } }
.jt-duplicate-banner ul, .jt-duplicate-dialog ul { margin: 4px 0; padding-left: 18px; text-align: left; }
.jt-duplicate-banner li, .jt-duplicate-dialog li { margin: 4px 0; overflow-wrap: anywhere; }
.jt-duplicate-reasons { font-size: 12px; color: #555; }
.jt-duplicate-banner .classic-btn, .jt-duplicate-dialog .classic-btn { margin-top: 3px; font-size: 12px; }
.jt-duplicate-note { margin: 4px 0 0; font-size: 12px; color: #8b0000; }
.jt-duplicate-dialog { text-align: left; font-size: 13px; }
.jt-duplicate-dialog p { margin: 4px 0; }

/* Retro dialog (same look as the site's swal), above the popups and the loader. */
.jt-dialog-overlay { position: fixed; inset: 0; z-index: 2002; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); font-family: "Courier New", monospace; }
.jt-dialog { display: flex; flex-direction: column; width: min(560px, 100%); max-height: 85vh; background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #404040; border-bottom: 2px solid #404040; box-shadow: 4px 4px 0 #000; }
.jt-dialog-title { padding: 3px 6px; background: linear-gradient(to right, #000080, #1084d0); color: #fff; font-size: 13px; font-weight: bold; }
.jt-dialog-body { padding: 12px; overflow-y: auto; color: #000; line-height: 1.4; }
.jt-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 0 12px 12px; }
.jt-posting-list { margin: 2px 0; padding-left: 18px; }
.jt-posting-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; }
.jt-posting-remove { padding: 0 6px; min-width: 0; line-height: 1.4; }
.jt-also-posted a { overflow-wrap: anywhere; }

/* Cover letter: editor block (tone + note + write), the saved letter in the preview / text popup. */
.jt-cl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.jt-cl-tools .jt-cl-tone { width: auto; min-width: 140px; }
.jt-cl-tools .jt-cl-note { flex: 1; min-width: 200px; width: auto; }
.classic-field textarea.jt-cl-text { min-height: 220px; line-height: 1.4; }
.jt-cl-matches { margin: 4px 0; font-size: 12px; }
.jt-cl-matches summary { cursor: pointer; }
.jt-cl-matches ul { margin: 4px 0 0; padding-left: 18px; }
.jt-cl-matches li { margin-bottom: 3px; }
.jt-cl-view { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: 13px; line-height: 1.45;
              margin: 0 0 8px; padding: 8px; background: #fff; border: 2px inset #808080; max-height: 60vh; overflow-y: auto; }
.jt-cl-actions a.classic-btn { text-decoration: none; color: inherit; }

/* Application questions: editor rows (question | answer | length + tone + AI) and the preview list. */
.jt-qa-intro { margin: 0 0 6px; }
.jt-qa-toggle { margin-left: 6px; padding: 1px 8px; font-size: 12px; font-weight: normal; }
.formTable.jt-questions-table .col-title { width: 30%; }
.formTable.jt-questions-table th.jt-col-qa-options,
.formTable.jt-questions-table td.jt-cell-qa-options { width: 150px; }
.formTable.jt-form-table.jt-questions-table textarea.form-control { height: 96px; resize: vertical; }
.formTable.jt-form-table.jt-questions-table textarea.form-control.jt-qa-hint { height: 48px; margin-top: 4px; font-size: 12px; }
.jt-qa-options { display: flex; flex-direction: column; gap: 4px; }
.jt-qa-options .classic-btn { width: 100%; }
.jt-qa-list { margin: 0 0 8px; padding-left: 22px; }
.jt-qa-item { margin-bottom: 10px; }
.jt-qa-question { font-weight: bold; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 4px; }
.jt-qa-answer { max-height: 40vh; margin-bottom: 4px; }

.formTable select.form-control,
.formTable input[type="date"].form-control,
.formTable input[type="email"].form-control,
.formTable input[type="tel"].form-control {
    width: 100%;
    min-height: 24px;
    padding: 2px 4px;
    border: 2px inset #c0c0c0;
    font-size: 13px;
    font-family: "Courier New", monospace;
    background: #fff;
    box-sizing: border-box;
}

.formTable .jt-col-date { width: 150px; }

/* Job editor row tables: give Note the free space instead of the 40% first column */
.formTable.jt-status-table .col-title { width: 26%; }
.formTable.jt-contacts-table .col-title { width: 18%; }
.formTable.jt-contacts-table .jt-col-role { width: 12%; }
.formTable.jt-contacts-table .jt-col-email { width: 19%; }
.formTable.jt-contacts-table .jt-col-phone { width: 11%; }
.formTable.jt-form-table tbody td.jt-cell-actions { text-align: center; }
.formTable.jt-form-table textarea.form-control { height: 48px; }
.jt-fieldset .formTable-wrapper { max-height: none; }

/* iOS draws date/time inputs natively: centred text and an intrinsic width that overflows the field */
:where(#popupBody) input[type="date"],
:where(#popupBody) input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    min-height: 24px;
    line-height: 1.3;
    text-align: left;
}

:where(#popupBody) input[type="date"]::-webkit-date-and-time-value,
:where(#popupBody) input[type="time"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

.nav-bar a.reminder-badge {
    display: inline-block;
    min-width: 18px;
    margin: 0 0 0 2px;
    padding: 0 5px;
    border: 1px solid #600000;
    border-radius: 9px;
    background: #b00000;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .jt-field-row { flex-direction: column; gap: 0; }
    .jt-card-grid { grid-template-columns: 1fr; }
    .jt-filter-row-top select { flex: 1 1 100%; min-width: 0; }
    .jt-filter-dates { display: flex; flex: 1 1 100%; justify-content: space-between; }
    .jt-filter-dates input[type="date"] { flex: 1 1 0; min-width: 0; }
    .jt-filter-row-search { flex-wrap: wrap; }
    .jt-filter-row-search input[type="search"] { flex: 1 1 100%; }
    .jt-filter-row-search .classic-btn { flex: 1 1 auto; }
    .jt-page .portfolio-list-actions .classic-btn { flex: 1 1 auto; min-width: 0; }

    /* Job preview: two-column details, table rows become labelled cards */
    .jt-preview-grid { grid-template-columns: max-content minmax(0, 1fr); }
    .jt-preview-table thead { display: none; }
    .jt-preview-table,
    .jt-preview-table tbody,
    .jt-preview-table tr,
    .jt-preview-table td { display: block; }
    .jt-preview-table { background: transparent; }
    .jt-preview-table tr {
        margin-bottom: 8px;
        padding: 6px 8px;
        background: #ffffff;
        border: 2px outset #ffffff;
        border-right-color: #404040;
        border-bottom-color: #404040;
    }
    .jt-preview-table td { padding: 2px 0; border: none; }
    .jt-preview-table td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: #404040;
    }

    /* Job editor row tables: each row becomes a labelled card (DOM stays a table for commonjs.js) */
    .jt-fieldset { padding: 6px 6px 8px; }
    .jt-fieldset .formTable-wrapper { margin: 0; overflow: visible; }

    .formTable.jt-form-table {
        min-width: 0;
        margin-bottom: 4px;
        border: none;
        background: transparent;
    }

    .formTable.jt-form-table thead { display: none; }
    .formTable.jt-form-table tbody { display: block; }

    .formTable.jt-form-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
        margin-bottom: 8px;
        padding: 8px;
        border: 2px outset #ffffff;
        border-right-color: #404040;
        border-bottom-color: #404040;
    }

    .formTable.jt-form-table tbody td {
        display: block;
        min-width: 0;
        padding: 0;
        border: none;
        white-space: normal;
        text-align: left;
        font-size: 13px;
    }

    .formTable.jt-form-table tbody td.col-title-cell { white-space: nowrap; }

    .formTable.jt-form-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: bold;
        color: #404040;
        white-space: normal;
    }

    .formTable.jt-form-table tbody td.jt-cell-wide { grid-column: 1 / -1; }

    .formTable.jt-form-table input.form-control,
    .formTable.jt-form-table select.form-control,
    .formTable.jt-form-table textarea.form-control {
        width: 100%;
        min-height: 30px;
        font-size: 14px;
    }

    .formTable.jt-form-table input[type="text"].form-control { height: 30px; }
    .formTable.jt-form-table textarea.form-control { height: 64px; }

    .formTable.jt-form-table tbody td.jt-cell-auto { width: auto; text-align: left; }
    .formTable.jt-contacts-table tbody td.jt-cell-auto { order: 3; }

    /* Contacts: Name, then Role | Phone side by side, then Email and Note full width */
    .formTable.jt-contacts-table tbody td.jt-cell-email { order: 1; }
    .formTable.jt-contacts-table tbody td.jt-cell-note { order: 2; }
    .formTable.jt-contacts-table tbody td.jt-cell-actions { order: 4; }

    /* Questions: options in one wrapping line under the answer */
    .formTable.jt-questions-table tbody td.jt-cell-qa-options { width: auto; }
    .formTable.jt-form-table.jt-questions-table textarea.form-control { height: 110px; }
    .formTable.jt-form-table.jt-questions-table textarea.form-control.jt-qa-hint { height: 56px; }
    .jt-qa-options { flex-direction: row; flex-wrap: wrap; }
    .jt-qa-options select.form-control { flex: 1 1 120px; width: auto; }
    .jt-qa-options .classic-btn { width: auto; }

    .formTable.jt-form-table tbody td.jt-cell-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        padding: 0;
    }

    .formTable.jt-form-table tbody td.jt-cell-actions .classic-btn-icon,
    .formTable.jt-form-table tbody td.jt-cell-actions .classic-btn-icon:first-child {
        display: inline-flex;
        width: 30px;
        height: 30px;
        min-width: 30px;
        margin: 0;
    }
}


/* ===== Blog (public pages + admin) ===== */
/* Global (not scoped) because comment cards and admin cards are swapped in by AJAX. Reuses jt-* and portfolio-card*. */
.blog-muted { color: #606060; font-size: 12px; }
.blog-page .portfolio-content a.classic-btn { color: #000; text-decoration: none; }

.blog-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-toolbar .classic-btn { min-width: 0; }
.blog-filter-summary { margin: 0 0 10px; font-size: 13px; }

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
    align-items: start;
}

.blog-layout-single { grid-template-columns: minmax(0, 1fr); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
    min-width: 0;
}

.blog-card-featured { border-color: #c08000; border-right-color: #6a4600; border-bottom-color: #6a4600; }

.blog-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #c0c0c0; border-bottom: 2px solid #808080; }
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; flex: 1; }
.blog-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.portfolio-content .blog-card-title { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.portfolio-content .blog-card-title a:link,
.portfolio-content .blog-card-title a:visited { color: #000080; text-decoration: none; }
.portfolio-content .blog-card-title a:hover { text-decoration: underline; }

.portfolio-content .blog-card-summary { margin: 0; font-size: 13px; color: #303030; overflow-wrap: anywhere; }
.blog-card-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px dotted #a0a0a0; font-size: 12px; color: #404040; }

.blog-card-actions { display: flex; justify-content: flex-end; }
.blog-card-actions .classic-btn { padding: 2px 12px; font-size: 13px; }

.blog-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    background: #000080;
    border: 1px solid #ffffff;
    white-space: nowrap;
}

.portfolio-content a.blog-badge:link,
.portfolio-content a.blog-badge:visited,
.blog-badge { color: #ffffff; text-decoration: none; }
.blog-badge-featured { background: #c08000; }

.blog-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.blog-tag {
    display: inline-block;
    padding: 0 6px;
    font-size: 12px;
    background: #e8e8e8;
    border: 1px solid #a0a0a0;
    white-space: nowrap;
}

.portfolio-content a.blog-tag:link,
.portfolio-content a.blog-tag:visited { color: #000080; text-decoration: none; }
.portfolio-content a.blog-tag:hover,
.blog-tag.active { background: #000080; color: #ffffff !important; }
.blog-tag.active .blog-muted { color: #e0e0e0; }

.blog-sidebar { display: flex; flex-direction: column; gap: 12px; }

.blog-panel {
    background: #e8e8e8;
    border: 2px inset #ffffff;
    border-top-color: #808080;
    border-left-color: #808080;
    padding: 8px 10px;
}

.blog-panel-title { margin: -8px -10px 8px; padding: 2px 8px; background: #000080; color: #ffffff; font-weight: bold; font-size: 13px; }
.portfolio-content .blog-category-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.blog-category-list li { padding: 2px 0; }
.blog-category-list li.active a { font-weight: bold; }

.blog-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0 4px; }

/* Post page */
.blog-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; }
.blog-breadcrumb-admin { margin-left: auto; display: inline-flex; gap: 6px; }

.blog-preview-banner {
    margin-bottom: 12px;
    padding: 6px 10px;
    background: #ffffe0;
    border: 1px solid #c08000;
    font-size: 13px;
}

.blog-article {
    max-width: 780px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #ffffff;
    border: 2px inset #ffffff;
    border-top-color: #808080;
    border-left-color: #808080;
}

.portfolio-content .blog-article-title { margin: 0 0 6px; font-size: 26px; line-height: 1.25; color: #000080; overflow-wrap: anywhere; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #404040; }
.blog-article-header { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px groove #ffffff; }
.blog-article-cover { display: block; width: 100%; max-height: 420px; object-fit: cover; margin-bottom: 14px; border: 1px solid #808080; }
.blog-article-content { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.blog-article-content img { max-width: 100%; height: auto; }
.blog-article-tags { margin-top: 16px; }

.blog-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 2px groove #ffffff; }
.blog-action-btn { min-width: 0 !important; padding: 4px 10px; }

.blog-action-btn.is-active,
.blog-link-btn.is-active {
    border-style: inset !important;
    color: #b00000 !important;
    font-weight: bold;
}

.blog-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 780px;
    margin: 16px auto 0;
    font-size: 13px;
}

.blog-prev-next > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.blog-prev-next-right { text-align: right; align-items: flex-end; }

.blog-related,
.blog-comments { max-width: 780px; margin: 20px auto 0; }

.portfolio-content .blog-section-title {
    margin: 0 0 10px;
    padding: 2px 8px;
    font-size: 15px;
    background: #000080;
    color: #ffffff;
}

/* Comments */
.blog-comment-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.blog-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    font: 14px "MS Sans Serif", sans-serif;
    border: 2px inset #ffffff;
    border-top-color: #808080;
    border-left-color: #808080;
    resize: vertical;
}

.blog-comment-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.blog-comment-form-actions .js-char-count { margin-right: auto; }
.blog-reply-form,
.blog-edit-form { margin: 6px 0 10px; }
.blog-reply-form { margin-left: 44px; }

.blog-login-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }

.blog-thread { margin-bottom: 10px; }
.blog-replies { margin-left: 44px; border-left: 2px dotted #a0a0a0; padding-left: 10px; }
.blog-replies:empty { display: none; }

.blog-comment {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #f4f4f4;
    border: 1px solid #c0c0c0;
    transition: background-color 0.6s;
}

.blog-comment.blog-flash { background: #ffffc0; }

.blog-comment-avatar {
    flex: 0 0 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000080;
    color: #ffffff;
    font-weight: bold;
    border: 2px outset #ffffff;
}

.blog-comment-main { flex: 1; min-width: 0; }
.blog-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
.blog-comment-text { margin: 4px 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.blog-comment-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.blog-link-btn {
    padding: 0;
    background: none;
    border: none;
    color: #000080;
    font: 12px "MS Sans Serif", sans-serif;
    cursor: pointer;
}

.blog-link-btn:hover { text-decoration: underline; }
.blog-link-btn.is-active { border: none !important; }

/* Admin cards */
.blog-status-badge {
    padding: 1px 6px;
    font-size: 11px;
    font-weight: bold;
    border: 1px solid #404040;
    white-space: nowrap;
}

.blog-status-published { background: #c8f0c8; }
.blog-status-scheduled { background: #fff3c4; }
.blog-status-draft { background: #d8d8d8; color: #404040; }
.blog-comment-hidden { opacity: 0.7; }
.blog-moderation-text { margin-bottom: 8px; padding: 6px; background: #ffffff; border: 1px solid #a0a0a0; max-height: 140px; overflow-y: auto; }
.blog-field-hint { display: block; margin-top: 2px; }

/* Manage page filter bar: labelled fields in a groupbox, buttons on the right */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin: 0 0 12px;
    padding: 12px 10px 10px;
    border: 2px groove #ffffff;
    min-width: 0;
}
.blog-filter legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 4px;
    font: bold 12px "MS Sans Serif", sans-serif;
}
.blog-filter-field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; font: 12px "MS Sans Serif", sans-serif; }
.blog-filter-category { flex: 0 1 240px; }
.blog-filter-search { flex: 1 1 260px; }
.blog-filter-field select,
.blog-filter-field input { width: 100%; }
.blog-filter-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.blog-filter.is-filtered { background: #d4d0c8; }

/* Image uploads (post editor) */
.blog-image-field { display: flex; flex-direction: column; gap: 6px; }
.blog-image-preview { display: block; max-width: 100%; max-height: 180px; object-fit: contain; align-self: flex-start; border: 1px solid #808080; background: #ffffff; }
.blog-image-preview[hidden] { display: none; }
.blog-image-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.blog-file-btn { cursor: pointer; }
.blog-image-field.is-uploading .blog-file-btn,
.rich-editor.is-uploading .re-btn.busy { opacity: 0.6; pointer-events: none; cursor: progress; }
.rich-editor-content img,
.rich-content img { display: block; max-width: 100%; height: auto; margin: 8px auto; }

/* Image size presets (editor image toolbar; whitelisted in RichTextSanitizer) */
.rich-content img.img-w-25 { width: 25%; }
.rich-content img.img-w-50 { width: 50%; }
.rich-content img.img-w-75 { width: 75%; }
.rich-content img.img-w-100 { width: 100%; }

/* Image alignment (editor image toolbar; centered is the default) */
.rich-content img.img-align-left { margin-left: 0; margin-right: auto; }
.rich-content img.img-align-right { margin-left: auto; margin-right: 0; }

/* Wrap: text flows beside a left/right image. Auto-sized images are capped so text keeps some room. */
.rich-content img.img-wrap.img-align-left { float: left; margin: 4px 14px 8px 0; }
.rich-content img.img-wrap.img-align-right { float: right; margin: 4px 0 8px 14px; }
.rich-content img.img-wrap:not(.img-w-25):not(.img-w-50):not(.img-w-75) { max-width: 50%; }
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content pre, .rich-content table, .rich-content blockquote { clear: both; }
.rich-content::after { content: ""; display: block; clear: both; }

@media (max-width: 600px) {
    .rich-content img.img-w-25 { width: 50%; }
    .rich-content img.img-w-50,
    .rich-content img.img-w-75 { width: 100%; }
    .rich-content img.img-wrap.img-align-left,
    .rich-content img.img-wrap.img-align-right { float: none; }
    .rich-content img.img-wrap:not(.img-w-25):not(.img-w-50):not(.img-w-75) { max-width: 100%; }
}

/* Editor: selected image + its floating size toolbar */
.rich-editor { position: relative; }
.rich-editor-content img { cursor: pointer; }
.rich-editor-content img.re-selected { outline: 2px dashed #000080; outline-offset: 2px; }

.re-img-toolbar {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
    font: 12px "MS Sans Serif", sans-serif;
}

.re-img-toolbar[hidden] { display: none; }
.re-img-toolbar .re-btn { min-width: 26px; padding: 1px 6px; font-size: 12px; }
.re-img-toolbar .re-btn svg { display: block; margin: 0 auto; }
.re-img-toolbar .re-btn:disabled { color: #808080; cursor: default; }
.re-img-label { padding: 0 4px; }

@media (max-width: 768px) {
    .blog-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-filter-category,
    .blog-filter-search { flex: 1 1 100%; }
    .blog-filter-actions { flex: 1 1 100%; }
    .blog-filter-actions .classic-btn { flex: 1 1 0; justify-content: center; }
    .blog-sidebar { order: -1; }
    .blog-article { padding: 12px; }
    .portfolio-content .blog-article-title { font-size: 21px; }
    .blog-article-content { font-size: 15px; }
    .blog-prev-next { grid-template-columns: 1fr; }
    .blog-prev-next-right { text-align: left; align-items: flex-start; }
    .blog-replies,
    .blog-reply-form { margin-left: 14px; }
    .blog-breadcrumb-admin { margin-left: 0; width: 100%; }
}

/* ===== Hire Me (public /hire + admin Hire inquiries) ===== */
/* Global (not scoped) because inquiry cards are swapped in by AJAX. Reuses classic-*, jt-* and portfolio-card*. */
.hire-page .portfolio-content a.classic-btn,
.hire-admin .portfolio-content a.classic-btn { color: #000; text-decoration: none; }

.hire-hero { margin-bottom: 14px; }
.portfolio-content .hire-hero h1 { margin: 0 0 6px; }
.hire-pitch { margin: 0 0 8px; font-size: 15px; }
.hire-availability {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    background: #ffffff;
    border: 2px inset #c0c0c0;
    font-size: 13px;
}
.hire-availability-open b { color: #006000; }
.hire-availability-offers b { color: #8a6000; }
.hire-availability-closed b { color: #606060; }

.hire-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.portfolio-content a.hire-tab:link,
.portfolio-content a.hire-tab:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    color: #000;
    text-decoration: none;
}
.portfolio-content a.hire-tab:hover { background: #d4d4d4; }
.portfolio-content a.hire-tab:focus-visible { outline: 2px dotted #000000; outline-offset: 2px; }
/* Selected option: looks pressed/picked (white, inset, filled radio), not like a title bar. */
.portfolio-content a.hire-tab.active {
    background: #ffffff;
    border: 2px inset #ffffff;
    border-top-color: #404040;
    border-left-color: #404040;
    box-shadow: 0 0 0 2px #000080;
}
.portfolio-content a.hire-tab.active:hover { background: #ffffff; }
.hire-tabs-prompt { margin: 0 0 6px; font-weight: bold; }
.hire-tab-icon { font-size: 26px; line-height: 1; }
.hire-tab-text { flex: 1 1 auto; min-width: 0; }
.portfolio-content .hire-tab b { color: #000080; }
.hire-tab small { display: block; font-size: 12px; color: #303030; }
.hire-tab-radio {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px inset #ffffff;
    border-top-color: #404040;
    border-left-color: #404040;
    box-sizing: border-box;
}
.hire-tab.active .hire-tab-radio { background: radial-gradient(circle, #000000 0 3px, #ffffff 3.5px); }
.hire-tab-state {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: 12px;
    border: 1px solid #808080;
    background: #e8e8e8;
}
.hire-tab.active .hire-tab-state { background: #000080; color: #ffffff; border-color: #000080; }

.hire-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: start;
}
.hire-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.hire-panel {
    background: #ffffff;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
    padding: 10px 14px;
    min-width: 0;
}
.portfolio-content .hire-panel h2 { margin: 0 0 8px; font-size: 17px; }
.hire-panel p { margin: 0 0 8px; overflow-wrap: anywhere; }
.hire-multiline { white-space: pre-line; }

.hire-engagements { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-weight: bold; }

.hire-facts { width: 100%; border-collapse: collapse; font-size: 14px; }
.hire-facts th, .hire-facts td { padding: 4px 6px; border-bottom: 1px dotted #a0a0a0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.hire-facts th { width: 40%; color: #000080; }

.hire-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 8px; }
.hire-service { background: #f0f0f0; border: 1px solid #808080; padding: 8px; min-width: 0; }
.hire-service-title { font-weight: bold; color: #000080; margin-bottom: 4px; }
.hire-service-icon { margin-right: 4px; }
.hire-service p { margin: 0; font-size: 13px; }
.hire-badge { display: inline-block; margin-top: 4px; padding: 0 6px; background: #ffff99; border: 1px solid #808000; font-size: 11px; }

.hire-steps { margin: 0; padding-left: 22px; }
.hire-steps li { margin-bottom: 4px; }

.hire-form-panel { position: sticky; top: 10px; }
.hire-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.hire-field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hire-form input, .hire-form select, .hire-form textarea { width: 100%; box-sizing: border-box; }
.hire-form textarea { resize: vertical; }
.hire-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hire-sent { padding: 12px; background: #e8ffe8; border: 2px inset #c0c0c0; }
.hire-sent-title { font-weight: bold; font-size: 16px; }

.hire-other { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 16px; }

/* Admin */
.hire-track-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.hire-track-filter .classic-btn { min-width: 0; }
.hire-inquiry-new { border-color: #000080; }
.hire-inquiry-archived { opacity: 0.7; }
.hire-inquiry-new .hire-status-badge { background: #000080; color: #ffffff; }
.hire-inquiry-converted .hire-status-badge { background: #006000; color: #ffffff; }
.hire-message { margin: 8px 0; font-size: 13px; }
.hire-message summary { cursor: pointer; font-weight: bold; }
.hire-message p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.hire-fieldset { margin: 0 0 10px; padding: 6px 10px; border: 2px groove #ffffff; }
.hire-fieldset legend { font-weight: bold; padding: 0 4px; }
.hire-check { display: block; margin: 4px 0 8px; font-weight: bold; }

@media (max-width: 768px) {
    .hire-track { grid-template-columns: minmax(0, 1fr); }
    .hire-form-panel { position: static; }
}

@media (max-width: 600px) {
    .hire-tabs,
    .hire-field-row,
    .hire-field-row-3 { grid-template-columns: minmax(0, 1fr); }
    .hire-panel { padding: 8px 10px; }
}


/* ===== Navbar dropdown (Tools menu) and bell ===== */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-caret { font-size: 10px; margin-left: 2px; }
.nav-bar .nav-dropdown.is-open > .nav-item { background: #000080; color: #ffffff; border-style: inset; }
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 900;
    min-width: 180px;
    margin-top: 2px;
    padding: 2px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-bar .nav-dropdown-item,
.nav-bar .nav-dropdown-item:link,
.nav-bar .nav-dropdown-item:visited {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-family: "Times New Roman", serif;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
}
.nav-bar .nav-dropdown-item:hover,
.nav-bar .nav-dropdown-item:focus-visible { background: #000080; color: #ffffff; outline: none; }
.nav-bar .nav-item.nav-item-icon { padding-left: 7px; padding-right: 7px; }

/* ===== Notifications (shared: /Notifications/Notification) ===== */
.notif-push-panel { margin: 0 0 12px; padding: 6px 10px 8px; border: 2px groove #ffffff; background: #d4d4d4; }
.notif-push-panel legend { padding: 0 4px; font-weight: bold; }
.notif-push-status { margin: 2px 0 6px; font-weight: bold; }
.notif-push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notif-push-actions [hidden] { display: none; }
.notif-push-hint { margin: 6px 0 0; font-size: 12px; }

.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 10px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
}
.notif-card.is-unread { background: #ffffff; border-left: 4px solid #000080; }
.notif-card.is-read { opacity: 0.85; }
.notif-card-main { min-width: 0; flex: 1; }
.portfolio-content a.notif-card-title { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; color: #000080; text-decoration: none; overflow-wrap: anywhere; }
.portfolio-content a.notif-card-title:hover { text-decoration: underline; }
.portfolio-content .notif-card.is-read a.notif-card-title { font-weight: normal; }
.notif-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0000ff; flex: none; }
.notif-card-body { margin: 4px 0; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.notif-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #404040; }
.notif-chip { padding: 0 5px; border: 1px solid #808080; background: #e8e8e8; font-size: 11px; }
.notif-chip-sent { background: #e6ffe6; border-color: #006000; }
.notif-chip-failed { background: #ffe0e0; border-color: #b00000; }
.notif-chip-skipped { background: #fff8c4; border-color: #8a5a00; }
.notif-card-error { margin: 4px 0 0; font-size: 12px; color: #8a0000; }
.notif-card-actions { display: flex; flex-wrap: wrap; gap: 4px; flex: none; }
.notif-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }

/* ===== Notes (Tools > Notes) ===== */
.notes-search { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.notes-search input[type="search"] { flex: 1 1 220px; min-width: 0; padding: 3px 6px; }

.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
/* Masonry (Google Keep style): notes.js sets each card's grid-row-end: span N in 2px rows, so cards pack up under
   the shorter card above instead of leaving the gap of a whole grid row. Without JS it stays a plain grid. */
.note-grid.is-masonry { grid-auto-rows: 2px; row-gap: 0; }
.note-grid.is-masonry > #emptyState { grid-column: 1 / -1; grid-row-end: span 20; }
.note-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: #ffffe8;
    border: 2px outset #ffffff;
    border-right-color: #404040;
    border-bottom-color: #404040;
    box-shadow: 2px 2px 0 #000000;
    min-width: 0;
}
.note-card.is-featured { background: #fff4c0; border-left: 4px solid #c09000; }
.note-card-header { display: flex; align-items: flex-start; gap: 6px; }
.portfolio-content a.note-card-title {
    flex: 1;
    min-width: 0;
    font-weight: bold;
    font-size: 15px;
    color: #000080;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.portfolio-content a.note-card-title:hover { text-decoration: underline; }
.note-star {
    flex: none;
    padding: 0 4px;
    font-size: 18px;
    line-height: 1.2;
    color: #808080;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.note-star:hover, .note-star:focus-visible { border-color: #808080; background: #e8e8e8; }
.note-star.is-on { color: #c09000; }
.note-card-thumb { position: relative; display: block; border: 1px inset #808080; background: #000000; }
.note-card-thumb img { display: block; width: 100%; max-height: 170px; object-fit: cover; }
.note-card-thumb-count { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; background: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 11px; }
.note-card-snippet { margin: 0; font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.note-card-reminder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 3px 6px; background: #e8f0ff; border: 1px solid #8090c0; font-size: 12px; }
.note-card-reminder.is-overdue { background: #ffe0e0; border-color: #b00000; }
.note-card-repeat, .note-card-channels { white-space: nowrap; }
.note-card-meta { margin: 0; font-size: 11px; color: #606060; }
.note-card-actions { margin-top: auto; }
.notes-sentinel { padding: 14px; text-align: center; }
.notes-sentinel[hidden] { display: none; }

/* Note editor popup */
.note-title-row { display: flex; align-items: flex-end; gap: 10px; }
.note-title-field { flex: 1; min-width: 0; }
.note-feature-toggle { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; white-space: nowrap; cursor: pointer; }
.note-feature-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.note-feature-toggle.is-on { background: #fff4c0; border-style: inset; color: #8a5a00; font-weight: bold; }
.note-feature-toggle:focus-within { outline: 1px dotted #000000; outline-offset: 2px; }
.note-reminder legend .jt-checkbox { margin: 0; font-weight: bold; }
.note-reminder [hidden] { display: none !important; }
.note-interval { display: flex; align-items: center; gap: 6px; }
.note-interval input { width: 80px; }
.note-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0; }
.note-channels-label { font-weight: bold; }
.note-push-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; padding: 4px 6px; background: #fff8c4; border: 1px solid #8a5a00; font-size: 12px; }

.note-gallery-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.note-gallery-items:empty { display: none; }
.note-gallery-item { display: flex; flex-direction: column; gap: 4px; padding: 4px; background: #d4d4d4; border: 1px inset #808080; min-width: 0; }
.note-gallery-thumb { display: block; background: #000000; }
.note-gallery-thumb img { display: block; width: 100%; height: 100px; object-fit: cover; }
.note-gallery-item input[type="text"] { width: 100%; box-sizing: border-box; font-size: 12px; }
.note-gallery-buttons { display: flex; gap: 2px; }
.note-gallery-buttons .classic-btn { flex: 1; min-width: 0; padding: 1px 4px; }
.note-gallery-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.note-gallery.is-uploading { cursor: progress; opacity: 0.8; }

/* Note read popup */
.note-read .note-card-reminder { margin: 0 0 10px; }
.note-read-content { margin: 8px 0 12px; }
.note-read-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 0 0 12px; }
.note-read-gallery figure { margin: 0; padding: 4px; background: #d4d4d4; border: 1px inset #808080; }
.note-read-gallery img { display: block; width: 100%; height: 150px; object-fit: cover; background: #000000; }
.note-read-gallery figcaption { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 600px) {
    .note-title-row { flex-direction: column; align-items: stretch; }
    .note-feature-toggle { align-self: flex-start; }
    .notif-card { flex-direction: column; }
    .nav-dropdown-menu { left: 50%; transform: translateX(-50%); }
}

/* ===== Interview (admin bank, practice, mock interview, public /interview) ===== */
/* Global (not scoped) because cards, review panels and transcripts are swapped in by AJAX. Reuses jt-* and portfolio-card*. */
.jt-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 6px; }
.jt-badge-beginner { background: #e0f4e0; color: #2e6b2e; border-color: #a8d4a8; }
.jt-badge-intermediate { background: #e0ecff; color: #2f4f8a; border-color: #a8c0e8; }
.jt-badge-advanced { background: #fff0c8; color: #7a5a00; border-color: #e0c880; }
.jt-badge-expert { background: #ffd8d8; color: #8a2a2a; border-color: #e0a0a0; }
.jt-badge-low { background: #eeeeee; color: #555555; border-color: #c8c8c8; }
.jt-badge-medium { background: #e8e8ff; color: #44448a; border-color: #b8b8e0; }
.jt-badge-high { background: #ffe8c8; color: #8a4a00; border-color: #e8c090; }
.jt-badge-critical { background: #b00000; color: #ffffff; }
.jt-badge-status { background: #f0f0f0; color: #555555; border-color: #c8c8c8; }
.jt-badge-favourite { background: #fff4b0; color: #806000; }
.jt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.jt-tag { display: inline-block; padding: 0 6px; background: #ffffe8; border: 1px solid #c0c0a0; font-size: 11px; color: #404040; }

.iv-level-badge { background: #d8e8ff; color: #2f4f8a; border-color: #a8c0e8; }
.iv-type-badge { background: #efe0ff; color: #5a3a80; border-color: #c8b0e0; }
.iv-draft-badge { background: #fff3c4; color: #6a4a00; border-color: #e0c880; }
.iv-published-badge { background: #c8f0c8; color: #2e6b2e; border-color: #a8d4a8; }
.iv-review-badge { background: #eeeeee; color: #555555; border-color: #c8c8c8; }
.iv-review-verified, .iv-review-ok { background: #c8f0c8; color: #2e6b2e; border-color: #a8d4a8; }
.iv-review-needswork, .iv-review-warn { background: #fff3c4; color: #6a4a00; border-color: #e0c880; }
.iv-review-outdated, .iv-review-bad { background: #ffc8c8; color: #8a2a2a; border-color: #e0a0a0; }
.iv-card-draft { border-style: dashed; }
.iv-mini-btn { padding: 0 6px; font-size: 11px; }
.iv-warning { padding: 6px 10px; background: #fff3c4; border: 1px solid #c09000; }

/* Category tree */
.iv-category-grid { grid-template-columns: 1fr; }
.iv-category-card.iv-depth-1 { margin-left: 18px; }
.iv-category-card.iv-depth-2 { margin-left: 36px; }
.iv-category-card.iv-depth-3 { margin-left: 54px; }
.iv-icon-field { flex: 0 0 120px !important; }

/* Editor popup */
.iv-question-field textarea { font-size: 15px; font-weight: bold; }
.iv-ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.iv-ai-hint { font-size: 12px; }
.iv-review-note { margin: 0 0 8px; font-size: 12px; }
.iv-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 -2px; position: relative; z-index: 1; }
.iv-tab {
    padding: 4px 10px;
    background: #c0c0c0;
    border: 2px outset #ffffff;
    border-bottom: none;
    font-family: "MS Sans Serif", sans-serif;
    font-size: 13px;
    cursor: pointer;
}
.iv-tab.active { background: #e8e8e8; font-weight: bold; padding-bottom: 6px; }
.iv-tab-panel { padding: 10px; background: #e8e8e8; border: 2px groove #ffffff; margin-bottom: 10px; }
.iv-field-row { flex-wrap: wrap; }
.iv-field-row .classic-field { min-width: 160px; }
.iv-checks { flex-wrap: wrap; }
.iv-filled { outline: 2px solid #3c9a3c; background: #f0fff0 !important; }
.iv-row-table td { vertical-align: top; }
.iv-row-table input + input { margin-top: 4px; }
.iv-scenario-fields { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.iv-picker { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.iv-picker-state { font-size: 11px; color: #606060; }
.iv-picker-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 2px solid #000080;
}
.iv-picker-list li { padding: 4px 6px; cursor: pointer; font-size: 13px; }
.iv-picker-list li:hover, .iv-picker-list li:focus { background: #000080; color: #ffffff; outline: none; }
.iv-count-field { flex: 0 0 140px !important; }

/* Preview + public question content */
.iv-breadcrumb { margin: 0 0 4px; font-size: 12px; }
.iv-preview-question { margin: 0 0 6px; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.iv-preview-desc { margin: 0 0 8px; color: #404040; }
.iv-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.iv-practice-stats { margin: 6px 0 0; font-size: 12px; }
.iv-section { margin: 0 0 12px; padding: 8px 12px; background: #ffffff; border: 2px inset #ffffff; }
.iv-section > h3 { display: block; margin: 0 0 6px; font-size: 15px; }
.iv-section > summary { cursor: pointer; margin-bottom: 6px; }
.iv-section > summary > h3 { display: inline; margin: 0; font-size: 15px; }
.iv-keypoints { background: #f4f8ff; }
.iv-short-answer { background: #f2fff2; }
.iv-intent { background: #fffbe8; }
.iv-mistakes { background: #fff4f4; }
.iv-senior { background: #f6f0ff; }
.iv-followup-list { margin: 0; padding-left: 20px; }
.iv-followup { margin: 0 0 8px; }
.iv-followup-q { font-weight: bold; }
.iv-followup-meta { display: flex; flex-direction: column; font-size: 12px; color: #404040; }
.iv-followup-answer summary { cursor: pointer; color: #000080; font-size: 13px; }
.iv-chain { font-weight: normal; font-size: 12px; }
.iv-scenario { margin: 0 0 8px; padding: 6px 8px; background: #fbfbfb; border: 1px solid #c0c0c0; }
.iv-scenario > summary { cursor: pointer; font-weight: bold; }
.iv-scenario-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 6px 0; }
.iv-scenario-grid dt { font-weight: bold; color: #404040; }
.iv-scenario-grid dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.iv-story { padding: 6px 8px; background: #fffff0; border: 1px dashed #a0a0a0; }
.iv-review-label { margin: 6px 0 2px; font-weight: bold; color: #404040; }
.iv-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.iv-review-issues tr.iv-sev-error { background: #fff0f0; }
.iv-review-issues tr.iv-sev-outdated { background: #fff6e0; }
.iv-review-suggestion { margin: 6px 0; }
.iv-review-suggestion summary { cursor: pointer; color: #000080; }
.rich-content pre code.hljs { background: transparent; padding: 0; }

/* Practice dashboard */
.iv-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.iv-meter { position: relative; height: 20px; margin: 0 0 12px; background: #ffffff; border: 2px inset #ffffff; }
.iv-meter-fill { height: 100%; background: repeating-linear-gradient(90deg, #000080 0 10px, #1084d0 10px 12px); }
.iv-meter-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #000; text-shadow: 0 0 3px #ffffff; }
.iv-bar-col { width: 40%; }
.iv-bar { display: inline-block; width: calc(100% - 44px); height: 12px; vertical-align: middle; background: #ffffff; border: 1px inset #808080; }
.iv-bar-fill { height: 100%; }
.iv-bar-fill.iv-good { background: #2e8b2e; }
.iv-bar-fill.iv-mid { background: #c09000; }
.iv-bar-fill.iv-low { background: #b00000; }
.iv-bar-value { display: inline-block; width: 40px; text-align: right; font-size: 12px; }
.iv-weak-list { margin: 0; padding-left: 18px; }
.iv-weak-list li { margin: 0 0 6px; }
.iv-trend { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 4px; background: #ffffff; border: 2px inset #ffffff; }
.iv-trend-day { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.iv-trend-bar { width: 100%; background: #000080; }
.iv-trend-label { font-size: 10px; color: #606060; }
.iv-coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.iv-coverage ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* Flashcards */
.iv-deck { max-width: 880px; margin: 0 auto; }
.iv-deck-progress { text-align: right; font-weight: bold; margin: 0 0 6px; }
.iv-flashcard { padding: 14px 16px; background: #ffffff; border: 2px outset #ffffff; box-shadow: 2px 2px 0 #808080; }
.iv-flashcard-question { margin: 6px 0 10px; font-size: 21px; line-height: 1.3; }
.iv-flashcard-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.iv-answer-box { margin: 0 0 10px; padding: 6px 8px; background: #f4f4f4; border: 1px solid #c0c0c0; }
.iv-answer-box > summary { cursor: pointer; font-weight: bold; }
.iv-answer-box textarea, .iv-mock-answer textarea { width: 100%; margin-top: 6px; }
.iv-answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.iv-reveal-row { margin: 10px 0; text-align: center; }
.iv-grade-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #c0c0c0; }
.iv-grade-label { font-weight: bold; margin-right: 4px; }
.iv-grade small { display: block; font-size: 10px; color: #404040; }
.iv-grade-again { background: #ffd8d8; }
.iv-grade-hard { background: #fff0c8; }
.iv-grade-good { background: #d8f0d8; }
.iv-grade-easy { background: #d8e8ff; }
.iv-feedback { margin: 8px 0; padding: 8px 10px; background: #fffff0; border: 1px solid #c0c0a0; }
.iv-feedback-score { margin: 0 0 4px; }
.iv-covered li::marker { content: "\2714  "; color: #2e8b2e; }
.iv-missed li::marker { content: "\2718  "; color: #b00000; }
.iv-deck-done, .iv-empty-deck { padding: 16px; text-align: center; background: #ffffff; border: 2px inset #ffffff; }
.iv-listening { background: #ffd8d8 !important; animation: iv-pulse 1s infinite; }
@keyframes iv-pulse { 50% { box-shadow: 0 0 0 3px #ff8080; } }

/* Mock interview */
.iv-multi { min-height: 140px; }
.iv-coach { align-self: flex-end; margin-bottom: 8px; }
.iv-mock-meta { margin: 0 0 8px; font-size: 12px; }
.iv-mock-progress { margin: 0 0 6px; font-weight: bold; }
.iv-transcript { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.iv-turn { max-width: 85%; padding: 6px 10px; border: 1px solid #a0a0a0; }
.iv-turn-who { display: block; font-size: 11px; font-weight: bold; color: #404040; }
.iv-turn-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.iv-turn-interviewer { align-self: flex-start; background: #ffffff; }
.iv-turn-followup { border-left: 4px solid #000080; }
.iv-turn-candidate { align-self: flex-end; background: #e0ecff; }
.iv-turn-feedback { align-self: flex-end; background: #fffff0; font-size: 13px; }
.iv-turn-feedback > summary { cursor: pointer; }
.iv-mock-answer { padding: 8px 10px; background: #e8e8e8; border: 2px groove #ffffff; }
.iv-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.iv-report-score { font-size: 28px; font-weight: bold; }
.iv-signal { background: #000080; color: #ffffff; }
.iv-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Generate set */
.iv-idea-list { margin: 0; padding: 0; list-style: none; }
.iv-idea { margin: 0 0 8px; padding: 4px 6px; background: #ffffff; border: 1px solid #c0c0c0; }
.iv-idea-similar { background: #fffbe6; }
.iv-idea-text { font-weight: bold; }
.iv-idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 22px; font-size: 12px; }
.iv-idea-warning { color: #8a5a00; }

/* MCP access + OAuth consent */
.iv-mcp pre { white-space: pre-wrap; word-break: break-all; }
.iv-mcp .code-block { background: #1e1e1e; color: #dcdcdc; padding: 6px 10px; font-size: 12px; }
.iv-new-token { margin: 0 0 10px; padding: 8px 10px; background: #f0fff0; border: 2px solid #2e8b2e; }
.iv-token-row { display: flex; gap: 6px; }
.iv-token-row input { flex: 1; font-family: Consolas, monospace; }
.iv-expired { opacity: 0.6; }
.iv-consent { max-width: 640px; margin: 0 auto; }

/* Public pages */
.iv-public-intro { margin: 0 0 10px; }
.iv-public-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; }
.iv-public-nav { display: flex; flex-direction: column; gap: 2px; align-self: start; padding: 6px; background: #ffffff; border: 2px inset #ffffff; }
.iv-nav-item { padding: 3px 6px; color: #000 !important; text-decoration: none !important; font-size: 13px; }
.iv-nav-item.iv-depth-1 { padding-left: 18px; }
.iv-nav-item.iv-depth-2 { padding-left: 30px; }
.iv-nav-item.iv-depth-3 { padding-left: 42px; }
.iv-nav-item:hover { background: #e0e0ff; }
.iv-nav-item.active { background: #000080; color: #ffffff !important; }
.iv-nav-item.active .jt-muted { color: #c0c0ff; }
.iv-public-title { margin: 0 0 4px; font-size: 20px; }
.iv-public-list { margin: 0; padding-left: 26px; }
.iv-public-item { margin: 0 0 10px; }
.iv-public-q { font-size: 15px; font-weight: bold; }
.iv-public-desc { margin: 2px 0 4px; font-size: 13px; }
.iv-public-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.iv-liked { background: #d8f0d8; }
.iv-suggest { margin: 0 0 12px; padding: 8px 10px; background: #e8e8e8; border: 2px groove #ffffff; }
.iv-suggest textarea { width: 100%; }

@media (max-width: 768px) {
    .iv-public-layout { grid-template-columns: 1fr; }
    .iv-public-nav { max-height: 220px; overflow-y: auto; }
    .iv-turn { max-width: 100%; }
    .iv-report-grid, .iv-coverage { grid-template-columns: 1fr; }
    .iv-scenario-grid { grid-template-columns: 1fr; }
    .iv-category-card.iv-depth-1, .iv-category-card.iv-depth-2, .iv-category-card.iv-depth-3 { margin-left: 8px; }
    .iv-flashcard-question { font-size: 18px; }
    .iv-tab { flex: 1 1 auto; text-align: center; }
}

/* ===== AI models (Tools > AI models: connections, models, task routes) ===== */
.ai-section-title { margin: 18px 0 6px; font-size: 15px; border-bottom: 1px solid #808080; padding-bottom: 3px; }
.ai-empty { padding: 12px; border: 1px dashed #808080; background: #ffffff; color: #404040; }
.ai-connections { display: grid; gap: 10px; }
.ai-conn-card { background: #ffffff; border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; box-shadow: 1px 1px 0 #000000; padding: 8px 10px; }
.ai-conn-card.is-off, .ai-table tr.is-off { opacity: 0.6; }
.ai-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ai-conn-title { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ai-conn-meta { flex: 1 1 260px; font-size: 12px; overflow-wrap: anywhere; }
.ai-conn-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-conn-nomodels { margin: 6px 0 0; font-size: 12px; }
.ai-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; background: #ffffff; }
.ai-table th, .ai-table td { border: 1px solid #c0c0c0; padding: 4px 6px; text-align: left; vertical-align: top; }
.ai-table th { background: #e0e0e0; font-weight: bold; }
.ai-table code, .ai-conn-meta code { font-size: 12px; overflow-wrap: anywhere; }
.ai-col-actions { width: 1%; white-space: nowrap; }
.ai-col-actions .classic-btn { margin: 1px; }
.ai-tasks .ai-task-depth-0 td { background: #fffbe6; }
.ai-tasks .ai-task-depth-1 td { background: #f2f2f2; }
.ai-tasks .ai-task-depth-2 td:first-child { padding-left: 22px; }
.ai-task-desc { font-size: 12px; }
.ai-chain { margin: 0; padding-left: 20px; }
.ai-chain li.is-off { text-decoration: line-through; color: #808080; }
.ai-badge { display: inline-block; padding: 0 5px; border: 1px solid #a0a0a0; background: #eeeeee; font-size: 11px; font-weight: normal; }
.ai-badge-off { background: #e8e8e8; color: #555555; }
.ai-badge-warn { background: #fff0c8; color: #7a5a00; border-color: #e0c880; }
.ai-check { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; }
/* The popup layout makes every .classic-field input 100% wide; checkboxes keep their own size. */
.ai-check input[type="checkbox"] { width: auto !important; flex: 0 0 auto; margin: 0; }
.ai-select { width: 100%; max-width: 100%; box-sizing: border-box; }
.ai-field-narrow { max-width: 220px; }
.ai-check-hint { display: block; margin: 0 0 6px 22px; }
/* Input + button on one line: the popup layout forces inputs to 100%, so the selectors need the extra .classic-field. */
.classic-field .ai-input-with-btn { display: flex; align-items: stretch; gap: 6px; margin-bottom: 2px; }
.classic-field .ai-input-with-btn input { flex: 1 1 auto; width: auto !important; min-width: 0; margin-bottom: 0; }
.classic-field .ai-input-with-btn .classic-btn { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; padding: 0 12px; }
.ai-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 6px 8px; background: #fffbe6; border: 1px dashed #b08000; }
.ai-test-result { flex: 1 1 260px; font-size: 12px; overflow-wrap: anywhere; }
.ai-test-result.ok, .ai-ok { color: #006400; font-weight: bold; }
.ai-test-result.fail, .ai-fail { color: #800000; font-weight: bold; }
.ai-calls-wrap { overflow-x: auto; }
.ai-calls tr.is-failed td { background: #fff0f0; }
.ai-calls td { white-space: nowrap; }

@media (max-width: 768px) {
    .ai-table thead { display: none; }
    .ai-table, .ai-table tbody, .ai-table tr, .ai-table td { display: block; width: 100%; }
    .ai-table tr { border: 1px solid #c0c0c0; margin-bottom: 6px; }
    .ai-table td { border: none; border-bottom: 1px dotted #d0d0d0; }
    .ai-table td[data-label]::before { content: attr(data-label) ": "; font-weight: bold; color: #404040; }
    .ai-tasks .ai-task-depth-2 td:first-child { padding-left: 6px; }
    .ai-col-actions { width: auto; white-space: normal; }
    .ai-calls td { white-space: normal; }
}