/* ✅ Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Roboto, "Segoe UI", sans-serif;    
}

:root {
    font-size: 0.87rem; /* Default is 16px → this makes everything ~12.5% smaller */
}

body {
    line-height: 26px;
    color: #222;
    background-color: #dfdfdf;
}
p {
    /*font-family: "Atkinson Hyperlegible Next", sans-serif;*/
}
em {
    font-style: italic;
    font-weight: bold;
    /*text-transform: uppercase;*/
}

.strikethrough {
    text-decoration: line-through;
}


/* ✅ Layout Grid */
.container {
    display: grid;
    /*grid-template-columns: 220px 1fr 620px;*/ /* widened form column */
    /*grid-template-columns: 220px 1024px auto;*/
    grid-template-columns: 15% 70% 15%;
    gap: 20px;
    padding: 20px;
    max-width: 1920px;
    margin: 0 auto;
    border: solid 0px red;
}




.nav-wrapper {
    position: sticky;
    top: 20px; /* SAME as original nav */
    z-index: 0;
}

/* === Sticky Mode Selector === */
.mode-selector {
    position: sticky;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: row;
    gap: 6px;
    font-size: 0.83rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

    .mode-selector label {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }

    .mode-selector input[type="radio"] {
        transform: scale(1.1);
        accent-color: #0077cc;
    }

.mode-hidden {
    display: none !important;
}

.hidden{
    display: none !important;
}

/* ✅ Left Column - Navigation */
.nav {
    padding-left: 10px;
    margin-top: 38px;
    border-right: 1px solid #ddd;
    padding-right: 15px;
    position: sticky;
    top: 20px;
    align-self: start;
}

    .nav h2 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .nav ul {
        list-style: none;
        list-style-position: outside;
        margin-left: 0px;
    }

        .nav ul li {
            margin-bottom: 6px;
            font-weight: bold;
        }

            .nav ul li a {
                text-decoration: none;
                color: #333;
                font-size: 0.95rem;
            }

                .nav ul li a:hover {
                    color: #0077cc;
                }

            .nav ul li ul {
                margin-left: 10px;
                margin-top: 7px;
            }

                .nav ul li ul li {
                    font-weight: normal;
                }





/* ✅ Middle Column - Script */
.content {
    padding: 0 10px;
}

    .content h1, .content h2, .content h3 {
        color: #222;
    }

    .content p {
        margin-bottom: 15px;
    }


    .content h1 {
        font-size: 26px;
    }

    .content h2 {
        font-size: 22px;
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .content h3 {
        font-size: 18px;
        margin-top: 60px;
        margin-bottom: 8px
    }



/* ✅ Right Column - Sticky Form */
.form-container {
    border-left: 1px solid #ddd;
    padding-left: 15px;
    position: sticky;
    top: 20px;
    align-self: start;
}


/* ✅ Full width rows (span 2 cols) */
.full-width {
    grid-column: 1 / -1;
}

.sectionBreak {
    margin-top: 56px;
}

ul, ol {
    list-style-position: inside;
    margin-left: 30px;
}

    ul.listicle {
        margin-left: 30px;
        list-style-position: outside;
        
    }

        ul.listicle li {
            /*margin-bottom: 13px;
            line-height: 1.63rem;
            line-height: 30px;*/
        }

        .box {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px 30px 15px 30px;
            margin-bottom: 20px;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }


        .scaffold {
            margin: 0px;
            padding: 0px;
        }

        .indent-01 {
            margin-left: 30px;
        }
        /* Collapsible Sections */
        .form-section h3.collapsible {
            margin: 0;
            font-size: 1rem;
            color: #0077cc;
            border-bottom: 1px solid #eee;
            padding: 8px;
            cursor: pointer;
            background: #f3f7fb;
        }

        .form-content {
            display: grid;
            grid-template-columns: 1fr 1fr; /* two-column layout */
            gap: 15px;
            padding: 12px;
        }

        .form-section.collapsed .form-content {
            display: none; /* hides content when collapsed */
        }
        /* Checkbox field style */
        .checkbox-field {
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .checkbox-field input[type="checkbox"] {
                width: 16px;
                height: 16px;
                accent-color: #0077cc; /* blue checkmark */
                cursor: pointer;
            }

            .checkbox-field label {
                font-size: 0.9rem;
                font-weight: 400;
                cursor: pointer;
                display: contents;
            }

            .checkbox-field.full-width {
                grid-column: 1 / -1;
            }
        /* --- Info Bar above Navigation --- */
        .info-bar {
            grid-column: 1; /* aligns with first column (nav) */
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 10px;
            overflow: hidden;
            height: fit-content;
        }

        .info-bar-header {
            background: #f3f7fb;
            color: #0077cc;
            font-weight: 500;
            padding: 6px 10px;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.95rem;
        }

            .info-bar-header::after {
                content: "▲";
                font-size: 0.75rem;
                transition: transform 0.2s ease;
            }

        .info-bar.collapsed .info-bar-header::after {
            transform: rotate(180deg);
        }

        .info-bar-content {
            padding: 8px 12px;
            font-size: 0.9rem;
            color: #333;
        }

        .info-bar.collapsed .info-bar-content {
            display: none;
        }

        span.new, p.new {
            
            color: #5a9830;
        }

        span.deleted, p.deleted {
            
            text-decoration: line-through;
        }

        span.variable, span.variableName, span.variableName, span#anchorPrice  {
            
            color: #ff6a00;
        }

        span.variableName {
            
            
        }

            span.variableName::before {
                content: "{";
            }

            span.variableName::after {
                content: "}";
            }

        span.variableValue {
            
            color: #a2a0ff; /* dodgerblue;*/
        }

            span.variableValue::before {
                content: "[";
            }

            span.variableValue::after {
                content: "]";
            }

        .noteReference {
            color: #ccc;
        }

        .studyReference {
            color: #ccc;
            font-size: 0.80rem;
        }

        .tonalityReference {
            color: #b200ff;
            font-size: 0.80rem;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background: rgba(0,0,0,0.55);
        }

        .modal-content {
            background: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 900px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }

        .close {
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }









        /* Modified @ 31-03-2026 18:21 by Claude (Sonnet 4.6)
           Script variant toggle system.
           Two visual levels:
             - script-toggle-bar  : full button strip for box-level toggles (h2)
             - variant-links      : two always-visible text links (active bold/colored · inactive muted underline)
           script-toggle-pills still exists in markup but is hidden — JS reads it for variant data. */

        /* --- script-toggle-bar: full button strip (box-level toggles) --- */
        .script-toggle-bar {
            display:         flex;
            gap:             0;
            margin-bottom:   12px;
            border-radius:   6px;
            overflow:        hidden;
            border:          1px solid #ddd;
            width:           fit-content;
        }

        .script-toggle-btn {
            padding:         4px 14px;
            font-size:       0.78rem;
            font-weight:     500;
            cursor:          pointer;
            border:          none;
            border-right:    1px solid #ddd;
            background:      #f5f5f5;
            color:           #666;
            transition:      background 0.15s, color 0.15s;
            font-family:     Roboto, "Segoe UI", sans-serif;
        }

        .script-toggle-btn:last-child { border-right: none; }
        .script-toggle-btn:hover      { background: #eaeaea; }

        .script-toggle-btn.active-primary   { background: #eaf3ff; color: #0077cc; }
        .script-toggle-btn.active-secondary { background: #fff3e0; color: #e65100; }

        /* --- script-toggle-pills: hidden in DOM, used by JS as variant data source --- */
        .script-toggle-pills { display: none !important; }

        /* --- variant-links: sub-section (h3) level toggle — always-visible text links --- */
        .variant-links {
            display:        inline-flex;
            align-items:    center;
            gap:            4px;
            /*margin-left:    8px;*/
            vertical-align: middle;
            font-size:      0.72rem;
            
            letter-spacing: 0.03em;
            line-height:    1;
        }

        .variant-link {
            background:      none    !important;
            border:          none    !important;
            padding:         0       !important;
            margin:          0       !important;
            width:           unset   !important;
            grid-column:     unset   !important;
            cursor:          pointer !important;
            font-size:       0.72rem;
            
            font-family:     Roboto, "Segoe UI", sans-serif;
            letter-spacing:  0.03em;
            line-height:     1;
            white-space:     nowrap;
            text-decoration: underline;
            color:           #585b5d    !important;
            transition:      color 0.15s;
            text-transform:  uppercase;
        }

        .variant-link:hover { color: #777 !important; }

        /* Active state — primary = first variant, secondary = second.
           cursor: default signals the link is already selected. */
        .variant-link.active-primary   { color: #9e9e9e !important; text-decoration: none; font-weight: 400; cursor: default !important;  text-transform: uppercase;}
        .variant-link.active-secondary { color: #9e9e9e !important; text-decoration: none; font-weight: 400; cursor: default !important; }

        .variant-links-sep {
            color:           #9e9e9e;
            font-size:       0.72rem;
            line-height:     1;
            user-select:     none;
        }

        .script-variant { display: none; }
        .script-variant.variant-active { display: block; }

        /* Scoping wrapper for pill-level toggles inside a section. */
        .script-toggle-group { display: block; }




        table {
            border-collapse: collapse;
        }

            table td:first-child {
                vertical-align: middle;
            }

        th {
            background: #e7e6e6;
        }


            th.align-left, td.align-left {
                text-align: left;
            }



        #classificationTable {
            width: 100%;
            margin-top: 12px;
            font-size: 0.87rem;
        }

            #classificationTable th, #classificationTable td {
                padding: 4px 6px;
                vertical-align: top;
                border: 1px solid #ddd;
                padding: 6px;
                vertical-align: top;
                line-height: 18px;
            }


            #classificationTable th {
                white-space: nowrap;
            }

                #classificationTable td:first-child,
                #classificationTable th:first-child {
                    white-space: nowrap; /* Prevent line breaks */
                }

            #classificationTable tr.highlight {
                background-color: #fff2cc;
            }








        .risk-level {
            font-weight: bold;
            color: #000;
            display: inline-flex; /* ✅ Aligns icon + text vertically */
            align-items: center; /* Centers circle perfectly */
            gap: 4px; /* Spacing between dot and text */
            font-size: 0.82rem;
            margin-bottom: 2px;
        }



        .status-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        /* 🎯 Flat, balanced colors (tuned for white backgrounds) */
        .status-red {
            background-color: #e74c3c; /* 🔴 Strong but not harsh */
        }

        .status-orange {
            background-color: #f39c12; /* 🟠 Warm and vibrant */
        }

        .status-yellow {
            background-color: #f1c40f; /* 🟡 Golden yellow — visible on white */
        }

        .status-green {
            background-color: #2ecc71; /* 🟢 Emerald green — clean and modern */
        }

        .status-black {
            background-color: #2c3e50; /* ⚫ Charcoal black — softer than pure black */
        }



        .table-calls {
            border-spacing: 1px;
            border-collapse: separate;
            font-size: 12px;
        }

            .table-calls td, th { /* table cells */
                padding: 4px;
            }

            .table-calls .row {
                background-color: #ffffff;
                color: #777777;
            }

            .table-calls .rowAlt {
                background-color: #f7f7f7;
                color: #777777;
            }
            /* 
        .table-calls .row:hover, .rowAlt:hover {
        background-color: #f0f0f0;
    }
    */
            .table-calls .rowTotals {
                font-weight: bold;
            }

            .table-calls tr.rowTotals td {
                border-top: 1px solid #efefef;
                /*border-bottom: 1px solid #efefef;*/
            }


        span.aspRadioList {
        }

            span.aspRadioList label {
                display: inline-block;
                width: 233px;
                margin-left: 3px;
                border-bottom: 0px solid red;
                vertical-align: middle;
                font-size: 0.85rem;
                color: #666;
            }

            span.aspRadioList input[type="radio"] {
                transform: scale(1.1);
                accent-color: #666;
                width: unset;
                margin-left: 2px;
            }

        .right {
            text-align: right;
        }

        .form-container input[type="submit"].secondary, .form-container button.secondary {
            width: unset;
            padding-top: 8px;
            padding-bottom: 8px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 0.9rem;
            background-color: #333;
        }

        .form-container input[type="text"]:disabled, .form-container select:disabled, .automatic {
            background-color: #e5e5e5;
        }

        .form-container input[type="submit"].secondary:disabled, .form-container button.secondary:disabled {
            background-color: #999;
            cursor: unset;
        }


        .semi-automatic {
            background-color: #f0f0f0;
        }

        .form-container button.transparent {
            margin-right: 5px;
            font-size: 0.9rem;
            background: unset;
            padding: 0px;
            /* border: 1px solid red; */
            width: unset;
        }
        /* Modified @ 07-03-2026 23:15 — Button state classes for AJAX feedback */
        .btn-success {
            background-color: #2ecc71 !important;
            color: #fff !important;
        }

        .btn-error {
            background-color: #e74c3c !important;
            color: #fff !important;
        }

        .btn-loading {
            opacity: 0.6;
            cursor: wait !important;
        }

        /* Modified @ 06-04-2026 17:00 — Danger button for destructive actions (e.g. Delete) */
        .form-container button.danger,
        .form-container input[type="submit"].danger {
            background-color: #e74c3c;
            color: #fff;
        }

            .form-container button.danger:hover,
            .form-container input[type="submit"].danger:hover {
                background-color: #c0392b;
            }



        .form-container #CallObjectionsTable {
            display: table;
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 0.9rem;
            font-weight: 500;
        }

            .form-container #CallObjectionsTable thead tr {
                background-color: #f0f0f0;
            }

                .form-container #CallObjectionsTable thead tr th {
                    padding: 4px 8px;
                    border: 1px solid #ddd;
                    text-align: left;
                }

            .form-container #CallObjectionsTable tbody tr td {
                padding: 4px 8px;
                border: 1px solid #ddd;
                text-align: left;
            }


        .dateNavigationControls {
            font-size: 12px;
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
        }

            .dateNavigationControls input[type="submit"] {
                padding: 4px;
                font-size: 11px;
                border: 1px solid #cdcdcd;
                border-radius: 4px;
                cursor: pointer;
            }

                .dateNavigationControls input[type="submit"]:hover {
                    background-color: #fff
                }

                .dateNavigationControls input[type="submit"].today {
                    margin-right: 10px;
                }

                .dateNavigationControls input[type="submit"].previous {
                    margin-right: 0px;
                }

                .dateNavigationControls input[type="submit"].next {
                    margin-right: 3px;
                }


            .dateNavigationControls select {
                padding: 4px;
                font-size: 11px;
                border: 1px solid #cdcdcd;
                border-radius: 4px;
                float: right;
            }