/* 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;
    --border-color: #c5c5c5;
    --background-color: #f1f3f4;
    --text-color: #303135;
    --focus-color: #355e75;
    --mute-color: #5f6368bd;
    --mute-background-color: #e0e0e0;
    --action-color: #f29330;
    --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;

    /* reset default */
    & b {
        font-weight: var(--font-bold);
    };
    font-size: var(--font-size);
    font-family: var(--font-family);
    color: var(--text-color);

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

    &.-mt8 { margin-top: 8px; }

    /* Centering Modifier */
    &.-center {
        margin-left: auto;
        margin-right: auto;
    }

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

        &.-mw { max-width: inherit; }
        &.-mw1000 { max-width: 1000px; }
        &.-mt20 { margin-top: 20px; }
        & .admin-head:first-of-type {
            margin-top : 0;
        }
    }

    /* Form Header */
    & .form-header {
        font-size: 16px;
        font-weight: var(--font-bold);
        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"],
        & select,
        & textarea {
            width: 100%;
            padding: var(--padding);
            border-color: var(--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);
            }
        }

        & 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 4px;

            &: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"],
            & select,
            & textarea {
                background-color: var(--mute-background-color);
                color: var(--mute-color);
                border-color: #ccc; /* Softer border */
                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: #ccc; /* Maintain 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"] {
            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);
        }
        &.-m0 { margin: 0;}
    }

    /* 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);
            color: var(--mute-color);
            margin-bottom: 10px;
            font-weight: var(--font-bold);
            white-space: nowrap;
            &.-strong { 
                color: inherit;
                text-align: center;
                &::after, &::before {
                    content: "_____";
                    position:relative;
                    top: -5px;
                    margin:0 5px;
                    color: var(--mute-color);
                }

            }
        }
        &.-mt10 { margin-top: 10px; }
        &.-mt20 { margin-top: 20px; }
        &.-mt30 { margin-top: 30px; }
        &.-mt40 { margin-top: 40px; }
        &.-mb0  { margin-bottom: 0; }
        &.-W { width: 100%; }        
        
        &.-outline:has(> .form-section-title) {
            position: relative;
            border: 1px solid var(--border-color);
            padding: var(--padding);
            padding-top: 15px;
            margin-top: 20px;
            border-color: var(--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: 12px;
        align-items: center;

        & .form-group {
            flex: 1;
            &.-noflex { flex: 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(--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: #ccc; /* Maintain 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(--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;

        /* 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; }

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

        /* Gap Modifiers */
        &.-g0 { grid-gap: 0; }
        &.-g4 { grid-gap: 4px; }
        &.-g8 { grid-gap: 8px; }
        &.-g12 { grid-gap: 12px; }
        &.-g50 { grid-gap: 50px; }
        &.-g80 { grid-gap: 80px; }

        /* 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(--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 */
        &.-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; }
        &.-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; }

        /* 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: 8px;
        margin-top: 16px;

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

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

        & .ok {
            background-color: var(--action-color);
            border: none;
            color: white;
        }
    }

    /* 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(--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);
        &.-W-auto {
            width: auto
        }
        & th, td {
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            padding: 8px;
            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: var(--font-bold); }
        }
        & th { 
            border-top: 1px solid var(--border-color);
            background-color: #f8f9fa;
            font-weight: var(--font-bold);
        }
        &.wrap th, td { white-space: wrap; }
        & .table-element tr:last-child td {
            border-bottom: none;
        }
        /* Action column styling */
        & .action-cell {
            position: relative;
            text-align: right;
            padding: 0 0 0 8px;

            /* Three dots button */
            & .action-btn {
                position: relative;
                background: none;
                border: none;
                cursor: pointer;
                font-size: 18px;
                color: #666;
                padding: 4px 8px;
                border-radius: 4px;
                transition: background-color 0.2s;
                &::after {
                    content: '⋮';
                    font-weight: var(--font-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;
                }
            }

            /* Dropdown action menu */
            & .action-menu {
                display: none;
                position: absolute;
                text-align: left;
                right: 0;
                background-color: #fff;
                border: 1px solid var(--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;
                    &:last-child {
                        border-bottom: none;
                    }
                    &:hover {
                        background-color: #f0f0f0;
                    }
                }
                & a {
                    display: block;
                    font-size: 16px;
                    font-weight: normal;
                    padding: 10px 15px;
                    text-decoration: none;
                    color: var(--focus-color);
                    &.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(--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;
            }
        }
        & .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;
            }
        }
    }

    /* 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(--border-color);
        }
        &.-small {
            font-size: var(--font-size-small);
        }
    }


}
.admin-center:has(.modern-form .dialog) {
    background-color: rgba(0, 0, 0, 0.2);
    & .nav-tab-block li:not(.active) a {
        background-color: #fff;
    }
}