/* =====================================================
   Finance Assistant
   Component    : Global Setting
   File         : style.css
   Version      : 1.1.0
===================================================== */


/* =====================================================
   OVERLAY ROOT
===================================================== */

.global-setting-overlay{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:11000;

    visibility:hidden;

    pointer-events:none;

    background:#ffffff;

}


/* =====================================================
   OPEN
===================================================== */

.global-setting-overlay.is-open{

    visibility:visible;

    pointer-events:auto;

}


/* =====================================================
   BACKDROP
===================================================== */

.global-setting-backdrop{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background:#ffffff;

}


/* =====================================================
   PANEL
===================================================== */

.global-setting-panel{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    color:#253f3d;

}


/* =====================================================
   HEADER
===================================================== */

.global-setting-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    padding:20px;

    box-sizing:border-box;

    flex-shrink:0;

    background:#ffffff;

    border-bottom:
        1px solid
        #e5e9e8;

}


.global-setting-heading{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.global-setting-heading h2{

    margin:0;

    font-size:20px;

    line-height:1.3;

    font-weight:700;

    color:#253f3d;

}


.global-setting-heading span{

    font-size:12px;

    color:#7d8988;

}


/* =====================================================
   CLOSE
===================================================== */

.global-setting-close{

    width:36px;
    height:36px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    border:none;

    border-radius:50%;

    background:#f1f5f4;

    color:#334b4a;

    font-size:20px;

    cursor:pointer;

}


/* =====================================================
   CONTENT
===================================================== */

.global-setting-content{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding:20px;

    box-sizing:border-box;

    background:#ffffff;

}


/* =====================================================
   SECTION
===================================================== */

.global-setting-section,
.global-setting-period{

    width:100%;

    margin-bottom:20px;

    padding:16px;

    box-sizing:border-box;

    border:
        1px solid
        #e1e7e5;

    border-radius:14px;

    background:#ffffff;

}


/* =====================================================
   SECTION HEADER
===================================================== */

.global-setting-section-header{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-bottom:16px;

}


.global-setting-section-header h3{

    margin:0;

    font-size:17px;

    line-height:1.3;

    color:#253f3d;

}


.global-setting-section-header p{

    margin:5px 0 0;

    font-size:12px;

    line-height:1.4;

    color:#81908f;

}


/* =====================================================
   FORM
===================================================== */

.global-setting-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.global-setting-form.hidden{

    display:none !important;

}


/* =====================================================
   FIELDS
===================================================== */

.global-setting-fields{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.global-setting-field{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:7px;

    width:100%;

}


.global-setting-field.hidden{

    display:none !important;

}


.global-setting-field label{

    display:block;

    width:100%;

    margin:0;

    font-size:13px;

    line-height:1.4;

    font-weight:600;

    color:#667574;

    white-space:pre-line;

}


.global-setting-field input,
.global-setting-field select,
.global-setting-field textarea{

    width:100%;

    min-height:46px;

    padding:10px 12px;

    box-sizing:border-box;

    border:
        1px solid
        #d7dfdd;

    border-radius:12px;

    background:#ffffff;

    color:#253f3d;

    font-size:15px;

    font-family:inherit;

    outline:none;

}


.global-setting-field textarea{

    min-height:100px;

    resize:vertical;

}


.global-setting-field input:focus,
.global-setting-field select:focus,
.global-setting-field textarea:focus{

    border-color:#6f9994;

    box-shadow:
        0 0 0 3px
        rgba(111,153,148,.10);

}


/* =====================================================
   FIELD NOTE
===================================================== */

.global-setting-field-note{

    display:block;

    margin-top:1px;

    padding:0 4px;

    font-size:13px;

    line-height:1.5;

    color:#7a8583;

}


/* =====================================================
   ADD BUTTON
===================================================== */

.global-setting-add{

    width:100%;

    min-height:46px;

    margin-top:14px;

    padding:10px 16px;

    border:
        1px solid
        #253f3d;

    border-radius:12px;

    background:#ffffff;

    color:#253f3d;

    font-size:15px;

    font-weight:700;

    font-family:inherit;

    cursor:pointer;

}


.global-setting-add:active{

    transform:scale(.98);

}


/* =====================================================
   FORM ADD BUTTON
===================================================== */

.global-setting-form-add{

    width:100%;

    min-height:46px;

    margin-top:4px;

    padding:10px 16px;

    border:none;

    border-radius:12px;

    background:#253f3d;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    font-family:inherit;

    cursor:pointer;

}


.global-setting-form-add:active{

    transform:scale(.98);

}


/* =====================================================
   RESULT
===================================================== */

.global-setting-result{

    display:flex;

    flex-direction:column;

    gap:10px;

    width:100%;

    margin-top:14px;

}


/* =====================================================
   RESULT CARD
===================================================== */

.global-setting-result-item{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    padding:14px;

    box-sizing:border-box;

    border:
        1px solid
        #dfe6e4;

    border-radius:12px;

    background:#f5f7f7;

}


/* =====================================================
   RESULT CONTENT

   Penting:
   Jangan biarkan style global lain
   membuat content result kosong.
===================================================== */

.global-setting-result-content{

    display:flex !important;

    flex-direction:column !important;

    width:100%;

    gap:9px;

    min-width:0;

}


/* =====================================================
   RESULT ROW
===================================================== */

.global-setting-result-row{

    display:flex !important;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    width:100%;

    min-width:0;

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/* =====================================================
   RESULT LABEL
===================================================== */

.global-setting-result-label{

    flex:1 1 auto;

    min-width:0;

    margin:0;

    font-size:13px;

    line-height:1.45;

    color:#687876;

    word-break:break-word;

}


/* =====================================================
   RESULT VALUE
===================================================== */

.global-setting-result-value{

    flex:0 0 auto;

    max-width:65%;

    margin:0;

    font-size:14px;

    line-height:1.45;

    font-weight:700;

    color:#294845;

    text-align:right;

    word-break:break-word;

}


/* =====================================================
   RESULT DELETE
===================================================== */

.global-setting-result-delete{

    width:100%;

    min-height:40px;

    margin-top:12px;

    padding:8px 12px;

    border:
        1px solid
        #d5dddd;

    border-radius:10px;

    background:#ffffff;

    color:#7b4b4b;

    font-size:13px;

    font-weight:600;

    font-family:inherit;

    cursor:pointer;

}


.global-setting-result-delete:active{

    transform:scale(.98);

}


/* =====================================================
   CUSTOM SELECT
===================================================== */

.global-setting-custom-select{

    width:100%;

    min-height:58px;

    padding:0 18px;

    border:
        1px solid
        #d7dfdd;

    border-radius:18px;

    background:#ffffff;

    color:#253f3d;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    font-size:16px;

    cursor:pointer;

    text-align:left;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

    user-select:none;

}


.global-setting-custom-select:focus{

    outline:none;

    border-color:#6f9994;

    box-shadow:
        0 0 0 3px
        rgba(111,153,148,.10);

}


.global-setting-custom-select.has-value{

    border-color:#6f9994;

}


.global-setting-custom-value{

    flex:1;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.global-setting-custom-arrow{

    flex:0 0 auto;

    margin-left:12px;

    font-size:18px;

    color:#7d8988;

}


/* =====================================================
   CUSTOM PICKER
===================================================== */

.global-setting-picker{

    position:fixed;

    inset:0;

    z-index:99999;

    width:100vw;

    height:100vh;

    background:#ffffff;

    display:flex;

    flex-direction:column;

}


/* =====================================================
   PICKER BACKDROP
===================================================== */

.global-setting-picker-backdrop{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background:#ffffff;

}


/* =====================================================
   PICKER PANEL
===================================================== */

.global-setting-picker-panel{

    position:relative;

    z-index:1;

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    background:#ffffff;

}


/* =====================================================
   PICKER HEADER
===================================================== */

.global-setting-picker-header{

    width:100%;

    min-height:68px;

    padding:0 20px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    background:#ffffff;

    color:#253f3d;

    border-bottom:
        1px solid
        #e5e9e8;

    flex-shrink:0;

}


.global-setting-picker-header strong{

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:18px;

    font-weight:600;

}


.global-setting-picker-close{

    width:42px;

    height:42px;

    flex:0 0 42px;

    border:0;

    border-radius:50%;

    background:#f3f4f6;

    color:#253f3d;

    font-size:25px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}


/* =====================================================
   PICKER LIST
===================================================== */

.global-setting-picker-list{

    flex:1;

    width:100%;

    max-height:none;

    overflow-y:auto;

    overflow-x:hidden;

    background:#ffffff;

    -webkit-overflow-scrolling:touch;

}


/* =====================================================
   PICKER OPTION
===================================================== */

.global-setting-picker-option{

    width:100%;

    min-height:60px;

    padding:0 22px;

    box-sizing:border-box;

    border:0;

    border-bottom:
        1px solid
        #eeeeee;

    background:#ffffff;

    color:#253f3d;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    text-align:left;

    font-size:16px;

    font-family:inherit;

    cursor:pointer;

    transition:
        background .15s ease;

}


.global-setting-picker-option:active{

    background:#f3f4f6;

}


.global-setting-picker-option.selected{

    background:#f7f9ff;

    color:#526f6c;

    font-weight:600;

}


.global-setting-picker-option-label{

    flex:1;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* =====================================================
   RADIO
===================================================== */

.picker-radio{

    width:22px;

    height:22px;

    flex:0 0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#777;

    font-size:20px;

}


.global-setting-picker-option.selected
.picker-radio{

    color:#6f9994;

}


/* =====================================================
   CHECKBOX FIELD
===================================================== */

.global-setting-field.global-setting-checkbox-field{

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:space-between !important;

    width:100%;

    gap:16px;

}


.global-setting-field.global-setting-checkbox-field label{

    display:block;

    flex:1;

    width:auto;

    margin:0;

}


.global-setting-field input[type="checkbox"]{

    width:18px;

    height:18px;

    min-width:18px;

    min-height:18px;

    max-width:18px;

    max-height:18px;

    margin:0;

    padding:0;

    flex:none;

}


.global-setting-field.global-setting-checkbox-field
input[type="checkbox"]{

    width:20px !important;

    min-width:20px !important;

    max-width:20px !important;

    height:20px !important;

    min-height:20px !important;

    max-height:20px !important;

    margin:0 !important;

    padding:0 !important;

    flex:0 0 20px !important;

    appearance:auto;

}


/* =====================================================
   LABEL PRE-LINE
===================================================== */

.global-setting-field > label{

    white-space:pre-line;

}


/* =====================================================
   FOOTER
===================================================== */

.global-setting-footer{

    flex-shrink:0;

    padding:14px 20px 20px;

    box-sizing:border-box;

    background:#ffffff;

    border-top:
        1px solid
        #e5e9e8;

}


.global-setting-confirm{

    width:100%;

    min-height:50px;

    padding:12px 16px;

    border:none;

    border-radius:12px;

    background:#253f3d;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    font-family:inherit;

    cursor:pointer;

}


.global-setting-confirm:active{

    transform:scale(.98);

}


/* =====================================================
   BODY LOCK
===================================================== */

body.setting-open{

    overflow:hidden;

}


/* =====================================================
   SCROLLBAR
===================================================== */

.global-setting-content::-webkit-scrollbar,
.global-setting-picker-list::-webkit-scrollbar{

    width:6px;

}


.global-setting-content::-webkit-scrollbar-thumb,
.global-setting-picker-list::-webkit-scrollbar-thumb{

    background:rgba(0,0,0,.25);

    border-radius:10px;

}


.global-setting-content::-webkit-scrollbar-track,
.global-setting-picker-list::-webkit-scrollbar-track{

    background:transparent;

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .global-setting-header{

        padding:18px;

    }


    .global-setting-content{

        padding:18px;

    }


    .global-setting-footer{

        padding:
            14px
            18px
            18px;

    }


    .global-setting-field-note{

        font-size:12px;

        margin-top:1px;

        line-height:1.45;

    }


    .global-setting-result-item{

        padding:14px;

    }


    .global-setting-result-row{

        gap:12px;

    }


    .global-setting-result-label{

        font-size:12px;

    }


    .global-setting-result-value{

        max-width:60%;

        font-size:13px;

    }


    .global-setting-picker-header{

        min-height:62px;

        padding:0 16px;

    }


    .global-setting-picker-option{

        min-height:56px;

        padding:0 18px;

        font-size:16px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:380px){

    .global-setting-result-row{

        flex-direction:column;

        align-items:flex-start;

        gap:2px;

    }


    .global-setting-result-value{

        max-width:100%;

        text-align:left;

    }

}