/* ==========================================================
   PAY ECTO — Contas a pagar v0.1.108
   ========================================================== */

.role-master .master-payables-bell{
    position:relative;
    margin-left:auto;
    margin-right:8px
}

.role-master .master-payables-bell summary{
    position:relative;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    display:grid;
    place-items:center;
    color:#e8f0fa;
    background:rgba(255,255,255,.06);
    cursor:pointer;
    list-style:none
}

.role-master .master-payables-bell summary::-webkit-details-marker{
    display:none
}

.role-master .master-payables-bell-svg{
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    min-height:17px!important;
    max-width:17px!important;
    max-height:17px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important
}

.role-master .master-payables-bell-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    box-sizing:border-box;
    border:2px solid #071a36;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#fff;
    background:#ef3e4a;
    font-size:9px;
    line-height:1;
    font-weight:900
}

.role-master .master-payables-bell-panel{
    position:absolute;
    z-index:10000;
    top:46px;
    right:0;
    width:300px;
    padding:10px;
    box-sizing:border-box;
    border:1px solid #e3e9f1;
    border-radius:15px;
    background:#fff;
    box-shadow:0 18px 40px rgba(7,26,54,.2)
}

.role-master .master-payables-bell-heading{
    padding:5px 6px 9px;
    border-bottom:1px solid #edf0f4
}

.role-master .master-payables-bell-heading strong,
.role-master .master-payables-bell-heading small{
    display:block
}

.role-master .master-payables-bell-heading strong{
    color:#17243b;
    font-size:12px
}

.role-master .master-payables-bell-heading small{
    margin-top:3px;
    color:#8390a2;
    font-size:9px
}

.role-master .master-payables-bell-item{
    min-height:54px;
    padding:8px 7px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #f0f2f5;
    color:#213149;
    text-decoration:none
}

.role-master .master-payables-bell-item span{
    min-width:0
}

.role-master .master-payables-bell-item b,
.role-master .master-payables-bell-item small{
    display:block
}

.role-master .master-payables-bell-item b{
    font-size:9px
}

.role-master .master-payables-bell-item small{
    margin-top:3px;
    color:#8793a4;
    font-size:8px
}

.role-master .master-payables-bell-item>strong{
    min-width:28px;
    height:28px;
    border-radius:8px;
    display:grid;
    place-items:center;
    font-size:10px
}

.role-master .master-payables-bell-item.overdue>strong{
    color:#be3333;
    background:#fff0f0
}

.role-master .master-payables-bell-item.upcoming>strong{
    color:#a76500;
    background:#fff6df
}

.role-master .master-payables-bell-item.received>strong{
    color:#11844e;
    background:#e9f8f0
}

.role-master .master-payables-bell-open{
    margin-top:7px;
    min-height:36px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#fff;
    background:#0867ef;
    text-decoration:none;
    font-size:9px;
    font-weight:900
}

/* page */
.role-master .payables-page{
    display:flex;
    flex-direction:column;
    gap:15px
}

.role-master .payables-page-head{
    margin-top:-5px;
    padding:0 2px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap
}

.role-master .payables-page-head h2{
    margin:0;
    color:#17243b;
    font-size:20px
}

.role-master .payables-page-head p{
    margin:5px 0 0;
    color:#778498;
    font-size:10px
}

.role-master .payables-new-button{
    min-height:40px;
    padding:0 16px;
    border:0;
    border-radius:9px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    background:#0968ee;
    box-shadow:0 5px 13px rgba(9,104,238,.18);
    font:inherit;
    font-size:10px;
    font-weight:900;
    cursor:pointer
}

.role-master .payables-new-button span{
    font-size:15px;
    line-height:1
}

.role-master .payables-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px
}

.role-master .payables-summary-card{
    min-height:91px;
    padding:15px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    align-items:center;
    border:1px solid #e7ebf1;
    border-radius:12px;
    background:#fff;
    box-shadow:0 3px 10px rgba(19,37,63,.035)
}

.role-master .payables-summary-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:16px;
    font-weight:900
}

.role-master .payables-summary-card small,
.role-master .payables-summary-card strong,
.role-master .payables-summary-card em{
    display:block
}

.role-master .payables-summary-card small{
    color:#78869a;
    font-size:9px
}

.role-master .payables-summary-card strong{
    margin-top:5px;
    color:#17243b;
    font-size:18px;
    line-height:1;
    font-weight:900
}

.role-master .payables-summary-card em{
    margin-top:5px;
    color:#8b96a7;
    font-size:7.5px;
    font-style:normal
}

.role-master .payables-summary-card.total{
    border-top:2px solid #1971ee
}
.role-master .payables-summary-card.total .payables-summary-icon{
    color:#136fe9;
    background:#eaf3ff
}

.role-master .payables-summary-card.received{
    border-top:2px solid #1fa066
}
.role-master .payables-summary-card.received .payables-summary-icon{
    color:#178451;
    background:#e8f8ef
}

.role-master .payables-summary-card.overdue{
    border-top:2px solid #e34d4d
}
.role-master .payables-summary-card.overdue .payables-summary-icon{
    color:#ca3a3a;
    background:#fff0ef
}

.role-master .payables-summary-card.upcoming{
    border-top:2px solid #efa63f
}
.role-master .payables-summary-card.upcoming .payables-summary-icon{
    color:#b77513;
    background:#fff4e2
}

/* filter */
.role-master .payables-filter-card,
.role-master .payables-calendar-card,
.role-master .payables-list-card{
    border:1px solid #e7ebf1;
    border-radius:12px;
    background:#fff;
    box-shadow:0 3px 12px rgba(19,37,63,.035)
}

.role-master .payables-filter-card{
    padding:12px
}

.role-master .payables-filter-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1.15fr 1.45fr auto auto;
    gap:9px;
    align-items:end
}

.role-master .payables-filter-field label{
    display:block;
    margin:0 0 5px 2px;
    color:#69788d;
    font-size:8px;
    font-weight:800
}

.role-master .payables-filter-field input,
.role-master .payables-filter-field select{
    width:100%;
    height:38px;
    margin:0;
    padding:0 10px;
    box-sizing:border-box;
    border:1px solid #dce3ec;
    border-radius:8px;
    background:#fff;
    color:#24344a;
    font:inherit;
    font-size:9px
}

.role-master .payables-filter-button,
.role-master .payables-filter-clear{
    height:38px;
    padding:0 13px;
    border-radius:8px;
    display:grid;
    place-items:center;
    box-sizing:border-box;
    font-size:8.5px;
    font-weight:900;
    text-decoration:none
}

.role-master .payables-filter-button{
    border:0;
    color:#fff;
    background:#0868ee;
    cursor:pointer
}

.role-master .payables-filter-clear{
    border:1px solid #dfe5ed;
    color:#4a5b72;
    background:#f8fafc
}

/* calendar */
.role-master .payables-calendar-card{
    overflow:hidden
}

.role-master .payables-calendar-head{
    min-height:59px;
    padding:12px 15px;
    box-sizing:border-box;
    border-bottom:1px solid #e9edf2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}

.role-master .payables-calendar-head h3{
    margin:0;
    color:#17243b;
    font-size:15px
}

.role-master .payables-calendar-nav{
    display:flex;
    align-items:center;
    gap:5px
}

.role-master .payables-calendar-nav a{
    min-width:32px;
    height:31px;
    padding:0 9px;
    box-sizing:border-box;
    border:1px solid #dfe5ed;
    border-radius:7px;
    display:grid;
    place-items:center;
    color:#43546b;
    background:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:800
}

.role-master .payables-calendar-nav a.today{
    min-width:49px;
    font-size:8px
}

.role-master .payables-calendar-scroll{
    overflow:auto
}

.role-master .payables-calendar{
    min-width:770px;
    display:grid;
    grid-template-columns:repeat(7,1fr)
}

.role-master .payables-calendar-weekday{
    height:35px;
    border-right:1px solid #e9edf2;
    border-bottom:1px solid #e9edf2;
    display:grid;
    place-items:center;
    color:#758399;
    background:#fafbfd;
    font-size:8px;
    font-weight:900
}

.role-master .payables-calendar-day{
    min-height:116px;
    padding:8px;
    box-sizing:border-box;
    border-right:1px solid #e9edf2;
    border-bottom:1px solid #e9edf2;
    background:#fff
}

.role-master .payables-calendar-day.empty{
    background:#fbfcfd
}

.role-master .payables-calendar-day.is-today{
    background:#f7fbff;
    box-shadow:inset 0 0 0 1px #9bc7ff
}

.role-master .payables-calendar-number{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    color:#56657a;
    font-size:9px;
    font-weight:800
}

.role-master .payables-calendar-day.is-today .payables-calendar-number{
    border-radius:50%;
    color:#fff;
    background:#0a6af1
}

.role-master .payables-calendar-events{
    margin-top:3px;
    display:flex;
    flex-direction:column;
    gap:4px
}

.role-master .payables-calendar-event{
    min-height:28px;
    padding:4px 6px;
    box-sizing:border-box;
    border-radius:5px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px;
    align-items:center;
    text-decoration:none;
    overflow:hidden
}

.role-master .payables-calendar-event span{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:7px;
    font-weight:800
}

.role-master .payables-calendar-event strong{
    white-space:nowrap;
    font-size:7px
}

.role-master .payables-calendar-event.received{
    color:#106f46;
    background:#daf3e6
}

.role-master .payables-calendar-event.overdue{
    color:#a83333;
    background:#ffe4e4
}

.role-master .payables-calendar-event.upcoming{
    color:#8a5b14;
    background:#fff0d5
}

.role-master .payables-more{
    color:#7e8b9e;
    font-size:7px
}

.role-master .payables-calendar-legend{
    min-height:42px;
    padding:10px 15px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:16px;
    color:#69778a;
    font-size:7.5px;
    font-weight:900
}

.role-master .payables-calendar-legend .received{
    color:#15945a
}
.role-master .payables-calendar-legend .overdue{
    color:#d34444
}
.role-master .payables-calendar-legend .upcoming{
    color:#d08a25
}

/* list */
.role-master .payables-list-head{
    min-height:59px;
    padding:13px 15px;
    box-sizing:border-box;
    border-bottom:1px solid #e9edf2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.role-master .payables-list-head h3{
    margin:0;
    color:#17243b;
    font-size:13px
}

.role-master .payables-list-head p{
    margin:3px 0 0;
    color:#8490a1;
    font-size:8px
}

.role-master .payables-list-head>strong{
    color:#67758a;
    font-size:8px
}

.role-master .payables-empty{
    padding:24px 15px;
    color:#7b8899;
    font-size:9px
}

.role-master .payables-list-item{
    min-height:82px;
    padding:12px 15px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:4px minmax(0,1fr) auto;
    gap:12px;
    border-bottom:1px solid #edf0f4
}

.role-master .payables-list-item:last-child{
    border-bottom:0
}

.role-master .payables-list-marker{
    width:4px;
    height:100%;
    min-height:58px;
    border-radius:4px
}

.role-master .payables-list-marker.received{
    background:#19a164
}
.role-master .payables-list-marker.overdue{
    background:#e34c4c
}
.role-master .payables-list-marker.upcoming{
    background:#efa53c
}

.role-master .payables-list-main{
    min-width:0
}

.role-master .payables-list-title{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}

.role-master .payables-list-title>strong{
    color:#1c2a40;
    font-size:10px
}

.role-master .payables-status{
    padding:3px 6px;
    border-radius:999px;
    font-size:6.5px;
    font-weight:900
}

.role-master .payables-status.received{
    color:#107144;
    background:#e3f6eb
}
.role-master .payables-status.overdue{
    color:#b63131;
    background:#ffe7e7
}
.role-master .payables-status.upcoming{
    color:#976011;
    background:#fff1d9
}

.role-master .payables-list-meta{
    margin-top:6px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    color:#7c899a;
    font-size:7.5px
}

.role-master .payables-list-meta b{
    color:#526177
}

.role-master .payables-observation{
    margin:7px 0 0;
    color:#7c899a;
    font-size:7.5px;
    line-height:1.4
}

.role-master .payables-list-value{
    min-width:132px;
    text-align:right
}

.role-master .payables-list-value>strong{
    color:#17243b;
    font-size:13px
}

.role-master .payables-list-actions{
    margin-top:8px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:5px;
    flex-wrap:wrap
}

.role-master .payables-list-actions a,
.role-master .payables-list-actions button{
    min-height:27px;
    padding:0 8px;
    border:1px solid #dde4ec;
    border-radius:6px;
    display:grid;
    place-items:center;
    box-sizing:border-box;
    color:#536278;
    background:#fff;
    text-decoration:none;
    font:inherit;
    font-size:7px;
    font-weight:800;
    cursor:pointer
}

.role-master .payables-list-actions form{
    margin:0
}

.role-master .payables-list-actions button.receive{
    border-color:#cfeadb;
    color:#147d4b;
    background:#effaf4
}

/* modal */
.role-master .payables-dialog{
    width:min(560px,calc(100vw - 24px));
    max-height:calc(100vh - 30px);
    padding:0;
    border:0;
    border-radius:17px;
    background:#fff;
    box-shadow:0 24px 65px rgba(8,26,53,.28)
}

.role-master .payables-dialog::backdrop{
    background:rgba(5,19,40,.56);
    backdrop-filter:blur(2px)
}

.role-master .payables-dialog-form{
    margin:0;
    padding:0
}

.role-master .payables-dialog-head{
    padding:17px 18px;
    border-bottom:1px solid #edf0f4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.role-master .payables-dialog-head span{
    color:#0a6aec;
    font-size:7px;
    font-weight:900;
    letter-spacing:.4px
}

.role-master .payables-dialog-head h3{
    margin:4px 0 0;
    color:#17243b;
    font-size:15px
}

.role-master .payables-dialog-close{
    width:34px;
    height:34px;
    padding:0;
    border:1px solid #e2e7ed;
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#5c6a7e;
    background:#fff;
    font-size:20px;
    cursor:pointer
}

.role-master .payables-dialog-grid{
    padding:17px 18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}

.role-master .payables-form-field.wide{
    grid-column:1/-1
}

.role-master .payables-form-field label{
    display:block;
    margin-bottom:6px;
    color:#526178;
    font-size:8px;
    font-weight:800
}

.role-master .payables-form-field label small{
    margin-left:4px;
    color:#929dab;
    font-size:7px;
    font-weight:600
}

.role-master .payables-form-field input,
.role-master .payables-form-field select,
.role-master .payables-form-field textarea{
    width:100%;
    margin:0;
    padding:0 10px;
    box-sizing:border-box;
    border:1px solid #dce3eb;
    border-radius:8px;
    color:#26364d;
    background:#fff;
    font:inherit;
    font-size:9px
}

.role-master .payables-form-field input,
.role-master .payables-form-field select{
    height:40px
}

.role-master .payables-form-field textarea{
    min-height:90px;
    padding-top:10px;
    resize:vertical
}

.role-master .payables-help{
    display:block;
    margin-top:5px;
    color:#8995a5;
    font-size:7px;
    line-height:1.35
}

.role-master .payables-dialog-actions{
    padding:13px 18px 17px;
    border-top:1px solid #edf0f4;
    display:flex;
    justify-content:flex-end;
    gap:8px
}

.role-master .payables-dialog-actions button{
    min-height:38px;
    padding:0 14px;
    border-radius:8px;
    font:inherit;
    font-size:8px;
    font-weight:900;
    cursor:pointer
}

.role-master .payables-cancel{
    border:1px solid #dfe5ec;
    color:#56657a;
    background:#fff
}

.role-master .payables-save{
    border:0;
    color:#fff;
    background:#0868ef
}

@media(max-width:900px){
    .role-master .payables-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .role-master .payables-filter-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width:600px){
    .role-master .master-payables-bell-panel{
        position:fixed;
        top:66px;
        right:10px;
        width:min(310px,calc(100vw - 20px))
    }

    .role-master .payables-page-head{
        align-items:flex-start
    }

    .role-master .payables-page-head>div{
        width:100%
    }

    .role-master .payables-new-button{
        width:100%;
        justify-content:center
    }

    .role-master .payables-summary-grid{
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .role-master .payables-summary-card{
        min-height:84px;
        padding:11px;
        grid-template-columns:34px minmax(0,1fr);
        gap:8px
    }

    .role-master .payables-summary-icon{
        width:32px;
        height:32px;
        font-size:13px
    }

    .role-master .payables-summary-card strong{
        font-size:14px
    }

    .role-master .payables-filter-grid{
        grid-template-columns:1fr
    }

    .role-master .payables-filter-button,
    .role-master .payables-filter-clear{
        width:100%
    }

    .role-master .payables-list-item{
        grid-template-columns:4px minmax(0,1fr);
        gap:9px
    }

    .role-master .payables-list-value{
        grid-column:2;
        min-width:0;
        text-align:left
    }

    .role-master .payables-list-actions{
        justify-content:flex-start
    }

    .role-master .payables-dialog-grid{
        grid-template-columns:1fr
    }

    .role-master .payables-form-field.wide{
        grid-column:auto
    }
}