/* Modern Form Stylesheet
 * Purpose: Provides a Google Cloud-like design for forms and grids
 * Scope: Applied within .modern-form wrapper for gradual integration
 */

/* Root Variables */
.modern-form {
    --font-size: 14px;
    --font-size-small: 12px;
    --primary-color: #1a73e8;
    --action-color: #f29330;
    --highlight-color: rgb(255, 105, 105);
    --field-border-color: #b2bac4;
    --mute-border-color: #e9eaea;
    --border-color: #dadce0;
    --background-color: #f1f3f4;
    --text-color: #303135;
    --focus-color: #355e75;
    --mute-color: #5f6368bd;
    --mute-background-color: #e0e0e0;
    --select-color: #fee9d2;
    --filled-bg: #fff;
    --border-radius: 4px;
    --padding: 8px 12px;
    --section-margin: 15px;
    --group-margin: 16px;
    --font-family: 'Roboto', -apple-system, sans-serif;
    --font-bold: 500;

    font-size: var(--font-size);
    font-family: var(--font-family);
    color: var(--text-color);

    .-w100 { width: 100px; }
    .-w200 { width: 200px; }
    .-w300 { width: 300px; }
    .-w500 { width: 500px; }
    .-w600 { width: 600px; }
    .-w700 { width: 700px; }
    .-w800 { width: 800px; }
    .-w900 { width: 900px; }
    .-w1000 { width: 1000px; }

    .-mw60 { max-width: 60px; }

    .-mt5 { margin-top: 5px; }
    .-mt8 { margin-top: 8px; }
    .-mt10 { margin-top: 10px; }
    .-mb5 { margin-bottom: 5px; }

    .-xscroll { 
        overflow-x: auto; 
        overflow-y: hidden; 
    }

    /* Centering Modifier */
    .-center {
        margin-left: auto;
        margin-right: auto;
    }
    .-tac {
        text-align: center;
    }

    /* Dialog Container */
    .dialog {
        max-width: 800px;
        background-color: white;
        padding: 16px;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        border: none;

        &.-center   {  margin: 0 auto; }
        &.-mw       { max-width: inherit; }
        &.-mw500    { max-width: 500px; }
        &.-mw1000   { max-width: 1000px; }
        &.-mt20     { margin-top: 20px; }
    }

    /* Key tip Container */
    .key-tips {
        font-size: 12px;
        .title {
            font-size: 13px;
        }
        * { margin-bottom: 3px;}
    }

    /* Form Header */
    .form-header {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
    }

    /* Form Group (Inputs, Selects, Textareas) */
    .form-group {
        position: relative;
        margin-bottom: var(--group-margin);

        input[type="text"],
        input[type="number"],
        input[type="password"],
        input[type="email"],
        select,
        textarea {
            width: 100%;
            padding: var(--padding);
            border-color: var(--field-border-color);
            border-radius: var(--border-radius);
            background-color: var(--filled-bg);
            font-size: var(--font-size);
            box-sizing: border-box;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;

            &:focus {
                outline: none;
                border-color: var(--focus-color);
                box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
            }
            &::placeholder {
                color: var(--mute-color);
            }
            &.-p5    {padding:5px;}
            &.-C    {text-align: center;}
            &.-w-auto {width: auto;}
            &.-w50 {width: 50px;}
            &.-w100 {width: 100px;}
            &.-w150 {width: 150px;}
        }
        select {
            padding-right: 30px;
        }

        &.-w-auto *   {width:auto !important;}

        label {
            position: absolute;
            top: 10px;
            left: 12px;
            font-size: 14px;
            color: var(--mute-color);
            pointer-events: none;
            transition: all 0.2s ease;
            background-color: var(--filled-bg);
            padding: 0 5px;
            border-radius: 6px;

            &:focus-within {
                top: -8px;
                font-size: var(--font-size-small);
                color: var(--focus-color);
                opacity: 1;
            }

            .tippy {
                pointer-events: auto;
            }
        }

        input:focus + label,
        input:not(:placeholder-shown) + label,
        textarea:focus + label,
        textarea:not(:placeholder-shown) + label,
        select:focus + label,
        select:not(:placeholder-shown) + label {
            top: -8px;
            font-size: var(--font-size-small);
            color: var(--focus-color);
            opacity: 1;
        }

        input.has-placeholder:placeholder-shown + label,
        textarea.has-placeholder:placeholder-shown + label {
            opacity: 0;
        }

        input[readonly],
        select[readonly] {
            background-color: var(--mute-background-color);
            color: var(--mute-color);
            cursor: not-allowed;
        }

        /* Margin Modifiers */
        &.-m0 { margin: 0; }
        &.-m4 { margin: 4px; }
        &.-m8 { margin: 8px; }
        &.-m12 { margin: 12px; }
        &.-mt4 { margin-top: 4px; }
        &.-mt8 { margin-top: 8px; }
        &.-mt12 { margin-top: 12px; }
        &.-mr4 { margin-right: 4px; }
        &.-mr8 { margin-right: 8px; }
        &.-mr12 { margin-right: 12px; }
        &.-mb0 { margin-bottom: 0; }
        &.-mb4 { margin-bottom: 4px; }
        &.-mb8 { margin-bottom: 8px; }
        &.-mb12 { margin-bottom: 12px; }
        &.-ml4 { margin-left: 4px; }
        &.-ml8 { margin-left: 8px; }
        &.-ml12 { margin-left: 12px; }

        /* Padding Modifiers */
        &.-p4 { padding: 4px; }
        &.-p8 { padding: 8px; }
        &.-p12 { padding: 12px; }
        &.-pt4 { padding-top: 4px; }
        &.-pt8 { padding-top: 8px; }
        &.-pt12 { padding-top: 12px; }
        &.-pr4 { padding-right: 4px; }
        &.-pr8 { padding-right: 8px; }
        &.-pr12 { padding-right: 12px; }
        &.-pb4 { padding-bottom: 4px; }
        &.-pb8 { padding-bottom: 8px; }
        &.-pb12 { padding-bottom: 12px; }
        &.-pl4 { padding-left: 4px; }
        &.-pl8 { padding-left: 8px; }
        &.-pl12 { padding-left: 12px; }
    
       &.disabled-field {
            opacity: 0.6; /* Slightly faded to indicate non-interactivity */
            pointer-events: none; /* Prevents interaction */

            input[type="text"],
            input[type="number"],
            input[type="email"],
            select,
            textarea {
                background-color: var(--mute-background-color);
                color: var(--mute-color);
                border-color: var(--mute-border-color);
                cursor: not-allowed; /* Visual cue for disabled state */
            }

            input[type="text"]:focus,
            input[type="number"]:focus,
            select:focus,
            textarea:focus {
                outline: none; /* Remove focus outline since it's disabled */
                box-shadow: none; /* Remove focus shadow */
                border-color: var(--mute-border-color);
            }

            label {
                color: var(--mute-color);
            }
        }
        /* color */
        &.-color {
            display: flex;
            gap: 5px;
            align-items: flex-start;
            .color-button-alpha {
                width: 33px;
                height: 33px;
                margin: 0;
                .color-button {
                    width: 33px;
                    height: 33px;
                    margin: 0;
                }
            }

            label {
                top: -8px;
                left: 45px;
            }
            input {
                min-width: 120px;
            }
            &.-mw120 input {
                max-width: 120px;
            }
        }
    }

    /* Select Styling */
    select {
        appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235f6368"><path d="M7 10l5 5 5-5H7z"/></svg>');
        background-repeat: no-repeat;
        background-size: 20px;
    }

    /* Textarea Styling */
    .textarea {
        min-height: 60px;
        resize: vertical;
    }

    /* Checkbox Group */
    .checkbox-group {
        margin-bottom: var(--group-margin);
        display: flex;
        input[type="checkbox"],
        input[type="radio"] {
            width: 17px;
            height: 17px;
            position: relative;
            top: -1px;
            margin: 0 5px 0 0;
        }

        label {
            font-size: var(--font-size);
            color: var(--text-color);
            cursor: pointer;
        }
        .tippy.info-hint:not(label .tippy.info-hint) {
            left: 5px;
            &::before {
                top: 0;
            }
        }
        &.disabled-field {
            opacity: 0.7;
            pointer-events: none;

            input[type="checkbox"] {
                background-color: var(--mute-background-color);
                accent-color: var(--mute-color);
                cursor: not-allowed;
            }

            label {
                color: var(--mute-color);
            }
            .tippy {
                pointer-events: auto;
            }
        }
        &:not(:has(input)) {
            span, div {
                display:none;
            }
        }
        &:has(.form-info) {
            flex-wrap: wrap;
        }
        .form-info {
            flex-basis: 100%;
            margin-left: 22px;
            font-size: var(--font-size-small);
            &.-mt5 { margin-top: 5px;}
            &.-mb0 { margin-bottom: 0px;}
        }
        &.-m0 { margin: 0;}
        &.-mb0 { margin-bottom: 0px;}
        &.-mb5 { margin-bottom: 5px;}
        &.-mb30 { margin-bottom: 20px;}
        &.-ml20 { margin-left: 20px;}
        &.-no-flex { flex: inherit !important;}
    }

    /* Radio Group */
    .radio-group {
        margin-bottom: var(--group-margin);
        input[type="radio"] {
            width: 17px;
            height: 17px;
            margin: 0;
        }

        label {
            font-size: var(--font-size);
            color: var(--text-color);
            cursor: pointer;
        }
        .form-info {
            flex: 0;
            margin-left: 30px;
            font-size: var(--font-size-small);
        }
    }
    /* Form Section */
    .form-section {
        margin-bottom: var(--section-margin);

        .form-section-title {
            font-size: var(--font-size);
            font-weight: bold;
            margin-bottom: 10px;
            &.-strong { 
                color: inherit;
                text-align: center;
                &::after, &::before {
                    content: "_____";
                    position:relative;
                    top: -5px;
                    margin:0 5px;
                    color: var(--mute-color);
                }
            }
            &.-mb0  { margin-bottom: 0; }
        }
        &.-mt10 { margin-top: 10px; }
        &.-mt20 { margin-top: 20px; }
        &.-mt30 { margin-top: 30px; }
        &.-mt40 { margin-top: 40px; }
        &.-mb0  { margin-bottom: 0; }
        &.-ml10  { margin-left: 10px; }
        &.-mr10  { margin-right: 10px; }
        &.-pl10  { padding-left: 10px; }

        &.-W { width: 100%; }        
        
        &.-outline:has(> .form-section-title) {
            position: relative;
            border: 1px solid var(--field-border-color);
            padding: var(--padding);
            padding-top: 15px;
            margin-top: 20px;
            border-color: var(--field-border-color);
            border-radius: var(--border-radius);
            > .form-section-title {
                position: absolute;
                top: -8px;
                background-color: #fff;
                color: inherit;
                padding: 0 8px;
            }
        }
        &.-outline.-center:has(> .form-section-title) {
            > .form-section-title {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    /* Flex Row Layout */
    .flex-row {
        display: flex;
        gap: 10px;
        align-items: center;

        .form-group, .checkbox-group  {
            flex: 1;
            &.-noflex { flex: 0; }
        }
        &.-jc-sb    { justify-content: space-between; }
        &.-jc-end   { justify-content: end; }
        /* Gap Modifiers */
        &.-g0 { grid-gap: 0; }
        &.-aifs { align-items: flex-start; }
    }

    /* Flex Column Layout */
    .flex-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        min-height: 0;
    }

    /* Grid Table Layout */
    .grid-table {
        display: grid;
        grid-template-rows: auto;
        grid-auto-rows: minmax(30px, auto);
        gap: 4px;
        margin-bottom: 12px;
        max-width: 100%;
        overflow-x: auto;

        .grid-header {
            grid-row: 1;
            display: contents;

            span {
                font-size: var(--font-size-small);
                color: var(--mute-color);
                text-align: center;
                padding: 4px 0;
                background-color: #f5f5f5;
            }
        }

        .grid-label {
            grid-column: 1;
            font-size: var(--font-size);
            color: var(--mute-color);
            padding: 8px 0;
            text-align: left;
        }

        .grid-input {
            text-align: center;
            padding: var(--padding);
            border: 1px solid var(--field-border-color);
            border-radius: var(--border-radius);
            background-color: var(--filled-bg);
            transition: box-shadow 0.2s ease;
            width: 100%;
            box-sizing: border-box;

            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
                border-color: var(--focus-color);
            }

            &.fixed-field {
                background-color: var(--mute-background-color);
                color: var(--mute-color);
                cursor: not-allowed;
                opacity: 0.7;
                user-select: none; /* Prevents text selection */
            }

           &:disabled {
                background-color: var(--mute-background-color);
                color: var(--mute-color);
                border-color: #ccc; /* Softer border */
                cursor: not-allowed;
                opacity: 0.7;
                user-select: none; /* Prevents text selection */
            }

            &:disabled:focus {
                outline: none; /* Remove focus outline */
                box-shadow: none; /* Remove focus shadow */
                border-color: var(--mute-border-color);
            }
        }

        /* Row Height Modifiers */
        &.-r20 { 
            grid-auto-rows: minmax(10px, auto); 
            .grid-label,
            .grid-input { 
                padding: 4px 0;
            }   
        } 
        &.-r20 { grid-auto-rows: minmax(20px, auto); } 
        &.-r30 { grid-auto-rows: minmax(30px, auto); } /* Default */
        &.-r40 { grid-auto-rows: minmax(40px, auto); }
        &.-r50 { grid-auto-rows: minmax(50px, auto); }
        &.-r60 { grid-auto-rows: minmax(60px, auto); }


        /* Max Height Modifiers */
        &.-max-auto { grid-auto-rows: minmax(30px, auto); } /* Default max, included for clarity */
        &.-max100 { grid-auto-rows: minmax(30px, 100px); }
        &.-max150 { grid-auto-rows: minmax(30px, 150px); }

        /* Combined Modifiers (Optional) */
        &.-r40-max100 { grid-auto-rows: minmax(40px, 100px); }
        &.-r50-max150 { grid-auto-rows: minmax(50px, 150px); }

        /* Column Count Modifiers */
        &.-c2 { grid-template-columns: minmax(100px, auto) repeat(2, minmax(50px, 1fr)); }
        &.-c3 { grid-template-columns: minmax(100px, auto) repeat(3, minmax(50px, 1fr)); }
        &.-c4 { grid-template-columns: minmax(100px, auto) repeat(4, minmax(50px, 1fr)); }
        &.-c5 { grid-template-columns: minmax(100px, auto) repeat(5, minmax(50px, 1fr)); }
        &.-c6 { grid-template-columns: minmax(100px, auto) repeat(6, minmax(50px, 1fr)); }
        &.-c7 { grid-template-columns: minmax(100px, auto) repeat(7, minmax(50px, 1fr)); }
        &.-c8 { grid-template-columns: minmax(100px, auto) repeat(8, minmax(50px, 1fr)); }
        &.-c9 { grid-template-columns: minmax(100px, auto) repeat(9, minmax(50px, 1fr)); }

        /* Label Width Modifiers */
        &.-l100 { --grid-label-width: minmax(100px, auto); }
        &.-l150 { --grid-label-width: minmax(150px, auto); }

        /* Gap Modifiers */
        &.-g0 { --grid-gap: 0; }
        &.-g4 { --grid-gap: 4px; }
        &.-g8 { --grid-gap: 8px; }

        /* ruled style */
        &.-ruled > span {
            padding: var(--padding);
            border-bottom: 1px solid var(--field-border-color); 
            &.form-info {
                margin-bottom: 0;
            }
        }
    }

    /* Generic Grid Utility */
    .grid {
        display: grid;
        grid-gap: 10px;
        box-sizing: border-box;
        grid-template-columns: 1fr 1fr;
        width: 100%;

        /* Column Count Modifiers */
        &.-c1 { grid-template-columns: 1fr; }
        &.-c2 { grid-template-columns: repeat(2, 1fr); }
        &.-c3 { grid-template-columns: repeat(3, 1fr); }
        &.-c4 { grid-template-columns: repeat(4, 1fr); }
        &.-c5 { grid-template-columns: repeat(5, 1fr); }
        &.-c6 { grid-template-columns: repeat(6, 1fr); }

        /* Ratio Modifiers */
        &.-c1-1 { grid-template-columns: 1fr 1fr; }
        &.-c1-2 { grid-template-columns: 1fr 2fr; }
        &.-c1-3 { grid-template-columns: 1fr 3fr; }
        &.-c2-1 { grid-template-columns: 2fr 1fr; }
        &.-c3-1 { grid-template-columns: 3fr 1fr; }
        &.-c4-1 { grid-template-columns: 4fr 1fr; }
        &.-c5-1 { grid-template-columns: 5fr 1fr; }

        &.-c160-auto {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Dynamically adjusts columns */
            min-width: 0; /* Prevents overflow issues */
        }
        &.-c200-auto {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamically adjusts columns */
            min-width: 0; /* Prevents overflow issues */
        }
        &.-c200-200 {
            grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
            min-width: 0; /* Prevents overflow issues */
        }

        /* Gap Modifiers */
        &.-g0 { grid-gap: 0; }
        &.-g5 { grid-gap: 5px; }
        &.-g10 { grid-gap: 10px; }
        &.-g15 { grid-gap: 15px; }
        &.-g20 { grid-gap: 20px; }
        &.-g30 { grid-gap: 30px; }
        &.-g40 { grid-gap: 40px; }
        &.-g50 { grid-gap: 50px; }
        &.-g80 { grid-gap: 80px; }

        &.-equal-height-bottom {
            /* Grid items automatically take the height of the tallest item */
            > .grid-item {
                display: flex;
                flex-direction: column;
                justify-content: flex-end; /* Aligns .pane to the bottom */
                height: 100%; /* Ensure grid-item fills the grid cell */
                .pane {
                    height: 100%; /* Ensure grid-item fills the grid cell */
                }
            }
        }
        /* Border Modifier */
        &.-borders {
            > div {
                border-left: 1px solid #cdcdcd;
                padding-left: 10px;

                &:first-child {
                    border-left: none;
                }
            }
        }

        /* row */
        .grid-row {
            display: contents; /* Allows the row container to act as if it’s not there for grid layout */
            &.-bb::after {
                content: '';
                grid-column: 1 / -1; /* Span the entire row */
                border-bottom: 1px solid var(--field-border-color); /* Border for the entire row */
            }
        }

        /* Alignment Modifiers */
        &.-justify-center { justify-items: center; }
        &.-justify-start { justify-items: start; }
        &.-items-center { align-items: center; }
        &.-items-start { align-items: start; }

        /* Margin Modifiers */
        &.-m5 { margin: 5px; }
        &.-m10 { margin: 10px; }
        &.-mt10 { margin-top: 10px; }
        &.-mt10 { margin-top: 10px; }
        &.-mt20 { margin-top: 20px; }
        &.-mt30 { margin-top: 30px; }
        &.-mb10 { margin-bottom: 10px; }

        /* Padding Modifiers */
        &.-p5 { padding: 5px; }

        /* Responsive Modifiers */
        @media screen and (max-width: 640px) {
            &:not(.-nowrap) { grid-template-columns: 1fr !important; }
            &.-sm-c1 { grid-template-columns: 1fr !important; }
            &.-md-c2 { grid-template-columns: repeat(2, 1fr) !important; }
        }
    }

    /* Button Group */
    .buttons {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        margin-top: 16px;
        align-items: center;

        button {
            padding: 8px 16px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: var(--font-size);
        }

        .cancel {
            background-color: #f1f3f4;
            border: 1px solid var(--field-border-color);
            color: var(--text-color);
        }

        .ok {
            background-color: var(--action-color);
            border: none;
            color: white;
        }
        &.-R {float:right;}
        &.-mt0 {margin-top:0;}
    }

    /* Info Icon */
    .info-icon {
        color: var(--mute-color);
        margin-left: 4px;
        font-size: var(--font-size);
        cursor: help;
    }

      /* FilePond */
      .-filepond-overlay {
        .filepond--root {
            position: absolute;
            width: 100%;
        }
      }
      .filepond--root {

        /* FilePond drop label */
        .filepond--drop-label {
          min-height: 2em;
          color: var(--text-color);
          label {
                position: static;
                pointer-events: all;
                background-color: transparent;
                font-size: var(--font-size-small);
            }
          fieldset {
                position: static;
                background-color: inherit;
            }
        }

        /* Style the panel for appearance */
        .filepond--panel-root {
          background-color: var(--filled-bg);
          border: 2px dashed var(--field-border-color);
          border-radius: var(--border-radius);
        }

        /* Style for image preview */
        .filepond--image-preview {
          background-color: var(--filled-bg);
        }

    }

    table.table-element  {
        width: 100%;
        border-collapse: collapse;
        color: var(--text-color);
        margin-bottom: var(--section-margin);
        &.-w-auto { width: auto; }
        &.-w600 { width: 600px; }
        &.-mb0 { margin-bottom: 0; }
        &.-bb0 tr:last-child td {
            border-bottom: none;
        }
        tr {
            &.-dim  > td    { color: var(--mute-color);}
        }
        th, td {
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            padding: 5px 10px;
            border-bottom: 1px solid var(--border-color);
            &.-wrap     { white-space: wrap; }
            &.-nowrap   { white-space: nowrap; }
            &.-C        { text-align: center; }
            &.-R        { text-align: right; }
            &.-B        { font-weight: bold; }
            &.-pl0      { padding-left: 0;}
            &.-pr0      { padding-right:0;}
            &.action-cell {
                padding:inherit;
                text-align: right;
            }
        }
        th { 
            border-top: 1px solid var(--border-color);
            background-color: #f8f9fa;
            font-weight: 500;
        }
        &.-plr5 {
            th, td {
                padding-left: 5px;
                padding-right: 5px;
            }
        }
        &.-wrap {
            th, td { white-space: wrap; }
        }

        &.-info {
            th, td {
                color: var(--mute-color);
                border-top: 1px solid var(--border-color);
            }
            th { 
                padding-right: 60px;
                background-color: transparent; 
                padding-left: 0;
                &.row-title {
                    border-top: none;
                }
            }
        }
	    &.-fixed	{ 
            table-layout:fixed;
            th, td {
                overflow:hidden; text-overflow: ellipsis;
                &.action-cell {
                    overflow:inherit;
                }
            }
        }
        
        &.-small {
            th, td {
                font-size: 12px;
                padding-left: 5px;
                padding-right: 5px;
            }
       }
        .table-element tr:last-child td {
            border-bottom: none;
        }
        &.-selectable {
            margin-bottom: -8px;
            tr {
                &:nth-of-type(odd)  td { background-color:#fbfbfc; }
                td:not(.noclick) {
                    cursor: pointer;
                }
                &.rcs td {
                    background-color: var(--select-color);
                }
                &:hover td {
                    background-color: var(--mute-background-color);
                }
                &:last-child td {
                    border-bottom: none;
                    background-color: white;
                }
            }
        }
        .draghandle { 
            background-position:center center;
            background-repeat:no-repeat;
            background-color: none;
            background-image:url(/media/icons/updown2.gif);
            opacity: 0.2;
            cursor:move;
            &:hover {
                opacity: 1;
            }
        }
        &:has(tr:not(.no-items) td) .no-items {
            display:none;
        }
    }
    /* Action column styling */
    .action-cell {
        position: relative;
        text-align: right;

        /* Three dots button */
        .action-btn {
            position: relative;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #666;
            padding: 0 10px;
            border-radius: 4px;
            transition: background-color 0.2s;
            &::after {
                content: '⋮';
                font-weight: bold;
            }
            &:hover {
                background-color: #eee;
                &::before {
                    z-index: 999;
                    display: block;
                }
            }
            &:focus, &:active {
                outline: none;
                box-shadow: none;
                background-color: none;
                border: none;
            }
            &::before {
                content: 'More actions';
                position: absolute;
                top: 110%;
                right: -20%;
                white-space: nowrap;
                display: none;
                font-size: var(--font-size-small);
                padding: 4px 8px;
                color: #f0f0f0;
                background-color: #888;
            }
        }
        &:has(.action-menu.show) .action-btn {
            background-color: var(--select-color);
        }

        /* Dropdown action menu */
        .action-menu {
            display: none;
            position: absolute;
            text-align: left;
            right: 0;
            background-color: #fff;
            border: 1px solid var(--field-border-color);
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
            z-index: 1000;
            min-width: 200px;
            ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li {
                margin-left: 0;                 /* temp admin reset */
                border-bottom: 1px solid #eee;
                display: flex;
                align-items: center;
                line-height: 2;
                padding: 0 10px;
                white-space: nowrap;
                &:last-child {
                    border-bottom: none;
                }
                &:has(a):hover {
                    background-color: #f0f0f0;
                }
                img {
                    height: 16px;
                    width: 16px;
                    padding-right: 10px;
                }
                &.info {
                    font-weight: bold; /* Emphasize headers */
                    color: var(--focus-color); /* Match <a> color */
                }
                &.rule-below {
                        border-bottom: 2px solid var(--field-border-color);
                }

                span.title {
                    font-size: 16px; /* Match <a> font size */
                    color: var(--focus-color); /* Match <a> color */
                    white-space: nowrap;
                }
                &.sub a {
                    padding: 0 28px;
                    font-size: 15px;
                    span.title {
                        font-size: 14px;
                    }
                }
                &.goto a {
                    background: url(/media/admin/link_arrow_small.svg) no-repeat 30px / 16px;
                    padding-left: 54px;
                }
                
            }
            a {
                display: block; /* Ensure full <li> is clickable */
                font-size: 16px;
                font-weight: normal;
                text-decoration: none;
                color: var(--focus-color);
                line-height: 2;
                width: 100%;
                &.icn-action {
                    margin-left: 10px;
                    padding-left: 20px;
                }
            }
        }
        /* Disabled item styling */
        .disabled {
            position: relative;
            a {
                color: var(--mute-color);
                cursor: not-allowed;
            }
            li:hover {
                background-color: transparent;
            }

            /* Flyout/Tooltip for disabled items */
            .tooltip {
                display: none;
                position: absolute;
                top: 0;
                right: 100%;
                background-color: #fff;
                border: 1px solid var(--field-border-color);
                border-radius: var(--border-radius);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
                padding: 10px;
                white-space: nowrap;
                font-size: var(--font-size);
                z-index: 1001;
                color: #333;
            }

            &:hover .tooltip {
                display: block;
                position: absolute;
            }
        }
        /* Show menu class */
        .show {
            display: block;
        }
    }

    /* form-info */
    .form-info {
        font-size: var(--font-size);
        color: #888;
        margin-bottom: 12px;

        border-radius: var(--border-radius);
        &.-border:not(:empty) {
            padding: var(--padding);
            border: 1px solid var(--field-border-color);
        }
        &.-small {
            font-size: var(--font-size-small);
        }
    }
    .pane {
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 10px;
        background-color: white;
        &.-mb0 {margin-bottom: 0;}
        &.-pb0 {padding-bottom: 0;}
        &.-fill {background-color: #f8f9fa;}
        .icn-action.-R { float: right;}
        &.-p-rel {position: relative;}
    }
    .-hide-empty:empty {
        display: none;
    }

    /* overrides */
    h1 {
        font-size: 22px;
        font-weight: bold;
        margin-top:5px;
    }
    h2 {
        font-size: 16px;
        font-weight: bold;
    }
    h3 {
        font-weight: bold;
    }

    .sort-indicator {
        background-size: 15px;
        margin-left: 0;
    }
    #unisearch-more-content {
        background-color: rgba(0, 0, 0, 0.01);
        border-radius: 10px;
    }
    .is-open #unisearch-more div a.unisearch-expand::before {
        font-weight: bold;
    }
    #unisearch-more-actions {
        top: -45px;
    }
    textarea.code, pre  {
        font-size: 12px;
    }
    #unisearch-form .highlighted-group {
		input, select					{ border:2px solid var(--highlight-color);}
		.field-label, label				{ color:var(--highlight-color);}
    }
}
.admin-center:has(.modern-form .dialog) {
    background-color: rgba(0, 0, 0, 0.08);
    .nav-tab-block li:not(.active) a {
        background-color: #fff;
    }
}
.admin-center:has(.modern-form .pane) {
    background-color: rgba(0, 0, 0, 0.05);
    .nav-tab-block li:not(.active) a {
        background-color: #fff;
    }
}
.folio-content {
    color: black;
    a {
        color: black;
    }
    .modern-form {
        color: black;
        .table-element td {
            color: black;
        }
        .pane {
            border: none;
            padding: 0;
            .table-element {
                th, td, &.-bb0 td {
                    border: 1px solid #bbb;
                }
            }
        }
    }
}