/* ==================================================
   FONTS
================================================== */

@font-face {
    font-family: 'MontserratAlt1';
    src: url('../fonts/montserrat-alt1/MontserratAlt1-Thin.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratAlt1';
    src: url('../fonts/montserrat-alt1/MontserratAlt1-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratAlt1';
    src: url('../fonts/montserrat-alt1/MontserratAlt1-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratAlt1';
    src: url('../fonts/montserrat-alt1/MontserratAlt1-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'MontserratAlt1';
    src: url('../fonts/montserrat-alt1/MontserratAlt1-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


/* ==================================================
   VARIABLES
================================================== */

:root{
    --primary: #000000;
    --secondary: #ffffff;
    --success: #25B358;
    --danger: #FF2D55;
    --dangerbg: #ff2d533d;
    --radius: 30px;
    --opacity: 0.6;
    --bgopacity: #ffffff99;
    --font-primary: 'MontserratAlt1', sans-serif;
}


/* ==================================================
   RESET / BASE
================================================== */

body{
    background: url('../images/bk.jpg') #ccc;
    background-size: cover;
    color: #000000;
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 15px;
    padding-bottom: 0;
}

body.loading{
    cursor: wait;
}

.response-stack{
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    width: min(360px, calc(100vw - 32px));
}

.response-stack .alert{
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    margin-bottom: 10px;
}

.confirm-modal .modal-content{
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.confirm-modal{
    z-index: 1105;
}

.modal-backdrop.confirm-modal-backdrop{
    z-index: 1100;
}

.confirm-modal .modal-header{
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 22px 24px 14px;
}

.confirm-modal .modal-title{
    font-size: 20px;
    font-weight: 700;
}

.confirm-modal .modal-body{
    color: rgba(0, 0, 0, 0.68);
    font-size: 15px;
    line-height: 1.5;
    padding: 18px 24px;
}

.confirm-modal .modal-footer{
    border-top: 0;
    gap: 10px;
    padding: 0 24px 24px;
}

.confirm-modal .btn-danger{
    background: var(--danger);
    border-color: var(--danger);
    color: var(--secondary);
}

.main{
    background: #83838340;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    padding-bottom: 0;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    min-height: calc(100vh - 30px);
}

h1{
    font-size: 32px;
    font-weight: 600;
}

h2{
    font-size: 26px;
    font-weight: 600;
}

h3{
    font-size: 20px;
    font-weight: 700;
}

h4{
    font-size: 16px;
    font-weight: 700;
}

a{
    text-decoration: none;
    color: inherit;
}

/* ==================================================
   AUTH
================================================== */

.auth-page{
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.auth-shell{
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 30px);
    width: 100%;
}

.auth-panel{
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2);
    max-width: 430px;
    padding: 34px;
    width: min(100%, 430px);
}

.auth-logo{
    align-items: center;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    height: 76px;
    justify-content: center;
    margin-bottom: 26px;
    width: 76px;
}

.auth-logo img{
    display: block;
}

.auth-copy{
    margin-bottom: 24px;
}

.auth-copy h1{
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.auth-copy p{
    color: rgba(0, 0, 0, 0.62);
    font-size: 15px;
    margin: 0;
}

.auth-form{
    display: grid;
    gap: 16px;
}

.auth-field{
    display: grid;
    gap: 8px;
}

.auth-field span{
    font-size: 13px;
    font-weight: 700;
}

.auth-field input{
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    color: #000000;
    font: inherit;
    min-height: 48px;
    outline: 0;
    padding: 10px 14px;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    width: 100%;
}

.auth-field input:focus{
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.auth-password-control{
    display: block;
    position: relative;
}

.auth-password-control input{
    padding-right: 82px;
}

.auth-password-toggle{
    background: rgba(0, 0, 0, 0.08);
    border: 0;
    border-radius: 999px;
    color: #000000;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-width: 62px;
    padding: 6px 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.18s ease, color 0.18s ease;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus{
    background: var(--primary);
    color: var(--secondary);
}

.password-strength{
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.password-strength-top{
    align-items: center;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
}

.password-strength-top strong{
    font-size: 12px;
}

.password-strength-track{
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}

.password-strength-track span{
    background: var(--danger);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: background 0.18s ease, width 0.18s ease;
    width: 0;
}

.password-strength[data-score="40"] .password-strength-track span,
.password-strength[data-score="60"] .password-strength-track span{
    background: #ffc107;
}

.password-strength[data-score="80"] .password-strength-track span,
.password-strength[data-score="100"] .password-strength-track span{
    background: var(--success);
}

.password-strength-rules{
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.password-strength-rules li{
    align-items: center;
    color: rgba(0, 0, 0, 0.58);
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.25;
}

.password-strength-rules li::before{
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    color: transparent;
    content: "";
    display: inline-flex;
    flex: 0 0 16px;
    height: 16px;
    justify-content: center;
    width: 16px;
}

.password-strength-rules li.is-valid{
    color: #000000;
    font-weight: 700;
}

.password-strength-rules li.is-valid::before{
    background: var(--success);
    color: var(--secondary);
    content: "✓";
    font-size: 11px;
}

.auth-submit:disabled{
    cursor: not-allowed;
    opacity: 0.42;
    transform: none;
}

.auth-row,
.auth-footer-link{
    color: rgba(0, 0, 0, 0.66);
    font-size: 13px;
    text-align: right;
}

.auth-row a:hover,
.auth-footer-link a:hover{
    color: #000000;
}

.auth-submit{
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 999px;
    color: var(--secondary);
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 11px 20px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.auth-submit:hover{
    opacity: 0.88;
    transform: translateY(-1px);
}

.auth-panel .alert{
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
}

.auth-dev-link{
    display: grid;
    gap: 4px;
    overflow-wrap: anywhere;
}

.auth-dev-link span{
    font-weight: 700;
}

.auth-footer-link{
    margin-top: 20px;
    text-align: center;
}

.topbar-account-user{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.62);
    display: block;
    font-size: 12px;
    font-weight: 700;
    max-width: 190px;
    overflow: hidden;
    padding: 12px 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================================================
   LAYOUT
================================================== */

.sidebar{
    align-items: center;
    display: flex;
    flex: 0 0 64px;
    flex-direction: column;
    min-height: calc(100vh - 150px);
    padding: 18px 0;
    position: relative;
    width: 64px;
    z-index: 30;
    max-height: calc(100vh - 80px);
}

.sidebar-menu{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block: auto;
}

.sidebar-settings{
    margin-top: 0;
}

.sidebar-item{
    position: relative;
}

.sidebar-icon{
    align-items: center;
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    height: 50px;
    justify-content: center;
    padding: 0;
    transition: background 0.18s ease, transform 0.18s ease;
    width: 50px;
}

.sidebar-icon svg{
    height: 28px;
    transition: stroke 0.18s ease;
    width: 28px;
}

.sidebar-item:hover .sidebar-icon,
.sidebar-item:focus-within .sidebar-icon,
.sidebar-item.is-active .sidebar-icon,
.sidebar-item.current .sidebar-icon{
    background: var(--primary);
    transform: translateX(2px);
}

.sidebar-item:hover .sidebar-icon svg,
.sidebar-item:focus-within .sidebar-icon svg,
.sidebar-item.is-active .sidebar-icon svg,
.sidebar-item.current .sidebar-icon svg{
    stroke: var(--secondary);
}

.sidebar-submenu{
    background: var(--primary);
    border-radius: 0 var(--radius) var(--radius);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    left: calc(100% + 16px);
    min-width: 180px;
    opacity: 0;
    padding: 14px 18px;
    pointer-events: none;
    position: absolute;
    top: 0px;
    transform: translate(8px, 0);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 40;
}

.sidebar-submenu::before{
    content: "";
    height: 100%;
    left: -18px;
    position: absolute;
    top: 0;
    width: 18px;
}

.sidebar-item:hover .sidebar-submenu,
.sidebar-item:focus-within .sidebar-submenu,
.sidebar-item.is-active .sidebar-submenu{
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0);
}

.sidebar-submenu-bottom{
    bottom: 0;
    top: auto;
    transform: translateX(8px);
}

.sidebar-item:hover .sidebar-submenu-bottom,
.sidebar-item:focus-within .sidebar-submenu-bottom,
.sidebar-item.is-active .sidebar-submenu-bottom{
    transform: translateX(0);
}

.sidebar-submenu-link{
    color: var(--secondary);
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    padding: 6px 0;
    position: relative;
    white-space: nowrap;
}

.sidebar-submenu-link::after{
    background: var(--secondary);
    bottom: 2px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
    width: 100%;
}

.sidebar-submenu-link:hover::after,
.sidebar-submenu-link:focus::after{
    transform: scaleX(1);
}

.sidebar-settings .sidebar-submenu{
        border-radius: var(--radius) var(--radius) var(--radius) 0;
}

.sidebar-link svg{
    stroke:#64748B;
}

.sidebar-link.active svg{
    stroke:#4F46E5;
}

.topbar{
    width: 100%;
}

.topbar-pill{
    background-color: var(--primary);
    color: var(--secondary);
    max-width: 978px;
    width: 100%;
    display: flex;
    padding: 14px 30px;
    border-radius: var(--radius);
}

.topbar-pill > div.row{
    width: calc(100% + 1.5rem);
}

.topbar-pill .sidebar-link{
    margin-right: 14px;
}

.topbar-pill svg{
    stroke: var(--secondary);
    width:24px;
    height:24px;
}

.topbar-event .sidebar-link{
    margin-right: 7px;
}

.topbar-event svg{
    width:20px;
    height:20px;
}

.topbar-active-task-link{
    color: var(--secondary);
    text-decoration: none;
}

.topbar-active-task-link:hover,
.topbar-active-task-link:focus{
    color: var(--secondary);
    text-decoration: underline;
}

.topbar-active-task-link.is-disabled{
    opacity: .72;
    pointer-events: none;
    text-decoration: none;
}

.topbar-iconlink{
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
}

.topbar-iconlink svg{
    stroke: #000000;
    width:20px;
    height:20px;
}

.topbar-right{
    align-items: center;
    display: flex;
    gap: 10px;
}

.topbar-search{
    display: inline-flex;
    position: relative;
}

.topbar-notifications{
    display: inline-flex;
    position: relative;
}

.topbar-notifications-count{
    align-items: center;
    background: var(--danger);
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 9px;
    font-weight: 700;
    height: 18px;
    justify-content: center;
    min-width: 18px;
    padding: 0 3px;
    position: absolute;
    right: -5px;
    top: -5px;
}

.topbar-notifications-toggle.has-unread::after{
    display: none;
}

.topbar-account{
    display: inline-flex;
    position: relative;
}

.topbar-iconlink.has-unread::after{
    background: var(--danger);
    border: 2px solid var(--danger);
    border-radius: 50%;
    content: "";
    height: 10px;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 10px;
}

.topbar-search-panel{
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: min(320px, calc(100vw - 30px));
    z-index: 20;
}

.topbar-search.is-open .topbar-search-panel{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.topbar-search-form{
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    gap: 8px;
    padding: 7px 8px 7px 16px;
    width: 100%;
}

.topbar-search-input{
    background: transparent;
    border: 0;
    color: #000000;
    flex: 1;
    font-family: var(--font-primary);
    font-size: 14px;
    min-width: 0;
    outline: 0;
}

.topbar-search-submit{
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.topbar-search-submit svg{
    height: 18px;
    stroke: var(--secondary);
    width: 18px;
}

.topbar-search-results{
    background: var(--secondary);
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    display: none;
    overflow: hidden;
    white-space: normal;
    max-height: 350px;
    overflow: auto;
}

.topbar-search.has-results .topbar-search-results{
    display: block;
}

.topbar-search-result{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--primary);
    display: block;
    padding: 13px 16px;
    text-decoration: none;
}

.topbar-search-result:last-child{
    border-bottom: 0;
}

.topbar-search-result:hover{
    background: rgba(0, 0, 0, 0.04);
    color: var(--primary);
}

.topbar-search-result-meta{
    margin-bottom: 6px;
}

.topbar-search-result-type{
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.62);
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
}

.topbar-search-result-title{
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

.topbar-search-result-text{
    color: #64748B;
    font-size: 12px;
    line-height: 1.35;
}

.topbar-search-empty{
    color: #64748B;
    font-size: 12px;
    padding: 14px 16px;
}

.topbar-notifications-panel{
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: min(320px, calc(100vw - 30px));
    z-index: 20;
}

.topbar-notifications.is-open .topbar-notifications-panel{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.topbar-notifications-read-all{
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #64748B;
    cursor: pointer;
    display: block;
    font-size: 11px;
    padding: 10px 16px;
    text-align: right;
    width: 100%;
}

.topbar-notification{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: block;
    padding: 14px 16px 14px 30px;
    position: relative;
    white-space: normal;
}

.topbar-notification:hover{
    background: rgba(0, 0, 0, 0.04);
}

.topbar-notification:last-child{
    border-bottom: 0;
}

.topbar-notification.unread::before{
    background: var(--danger);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 14px;
    position: absolute;
    top: 20px;
    width: 8px;
}

.topbar-notification-title{
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

.topbar-notification-text{
    color: #64748B;
    font-size: 12px;
    line-height: 1.35;
}

.topbar-avatar{
    background: transparent;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    padding: 0;
}

.topbar-avatar img{
    object-fit: cover;
    border-radius: 50%;
}

.topbar-account-menu{
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    min-width: 150px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}

.topbar-account.is-open .topbar-account-menu{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.topbar-account-link{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: #000000;
    display: block;
    font-size: 13px;
    font-weight: 600;
    padding: 13px 16px;
}

.topbar-account-link:hover{
    background: rgba(0, 0, 0, 0.04);
}

.topbar-account-link:last-child{
    border-bottom: 0;
}

.main-content{
    flex: 1;
    min-width: 0;
    max-height: calc(100vh - 96px);
    overflow: auto;
}

.main-body{
    display: flex;
    flex: 1;
    gap: 14px;
    min-height: 0;
}


/* ==================================================
   ICONS
================================================== */

.kb-icon{
    height: 20px;
    stroke-width: 2;
    width: 20px;
}


/* ==================================================
   BUTTONS
================================================== */

.btn{
    background-color: var(--primary);
    color: var(--secondary);
    font-size: 14px;
    padding: 6px 15px;
}

.btn.btn-outline,
.btn:hover{
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 500;
}

.btn.btn-outline:hover,
.btn.active{
    background-color: var(--primary);
    color: var(--secondary);
}

.btn-circle {
    padding: 10px;
}

.btn.btn-circle.btn-sm {
    padding: 0px ;
    height: 26px;
    width: 26px;
}

.btn.btn-circle.btn-sm .kb-icon{
    height: 14px ;
}

.btn.comment-btn{
    border-radius: 0 50% 50% 0;
    width: 47px;
    height: 47px;
}

.comment-textarea{
    border-radius: 18px 0 0 18px !important;
    height: 47px;
    min-height: 47px;
}


/* ==================================================
   MODALS
================================================== */

.modal-content{
    border-radius: var(--radius);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
}

.lead-form-modal .modal-dialog{
    max-width: min(1120px, calc(100vw - 28px));
}

.modal-header{
    border-bottom: 0;
    margin-bottom: -10px;
    padding: 22px 22px 0;
}

.modal-header .btn-close{
    z-index: 99;
}

.btn.btn-sm{
    font-size: 12px;
    font-weight: 700;
    padding: 6px 20px 3px;
}

.lead-form-body{
    padding: 8px 22px 22px;
}

.form-label{
    font-size: 12px;
    margin-bottom: 6px;
}

.lead-form-control{
    background-color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    color: var(--primary);
    font-size: 12px;
    min-height: 32px;
    padding: 6px 14px;
}

.lead-form-control:focus{
    background-color: rgba(255, 255, 255, 0.85);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.lead-form-body .ts-wrapper .ts-control{
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    box-shadow: none;
    display: flex;
    gap: 5px;
    min-height: 32px;
    padding: 4px 10px;
}

.lead-form-body .ts-wrapper.single .ts-control{
    padding: 6px 14px;
}

.lead-form-body .ts-wrapper.focus .ts-control{
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.lead-form-body .ts-wrapper.multi .ts-control > div{
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 500;
    gap: 5px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.lead-form-body .ts-wrapper.plugin-remove_button .item .remove{
    align-items: center;
    background: var(--dangerbg);
    border: 0;
    border-radius: 50%;
    color: var(--danger);
    display: inline-flex;
    font-size: 0;
    height: 15px;
    justify-content: center;
    margin: 0;
    order: -1;
    padding: 0;
    width: 15px;
}

.lead-form-body .ts-wrapper.plugin-remove_button .item .remove::before{
    content: "x";
    font-size: 11px;
    line-height: 1;
}

.lead-form-body .ts-dropdown{
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    color: var(--primary);
    font-size: 12px;
    margin-top: 6px;
    overflow: hidden;
}

.lead-form-body .ts-dropdown .option{
    padding: 9px 12px;
}

.lead-form-body .ts-dropdown .active{
    background: rgba(0, 0, 0, 0.08);
    color: var(--primary);
}

.lead-form-body .ts-control input{
    color: var(--primary);
    font-size: 12px;
}

.ts-wrapper .ts-control{
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 18px;
    box-shadow: none;
    color: var(--primary);
    display: flex;
    gap: 5px;
    min-height: 35px;
    padding: 7px 12px;
}

.ts-wrapper.single .ts-control{
    border-radius: 999px;
}

.ts-wrapper.focus .ts-control{
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.ts-wrapper.multi .ts-control > div{
    align-items: center;
    background: rgba(0, 0, 0, 0.07);
    border: 0;
    border-radius: 999px;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    line-height: 1;
    margin: 0;
    padding: 6px 8px;
}

.ts-wrapper.plugin-remove_button .item .remove{
    align-items: center;
    background: var(--dangerbg);
    border: 0;
    border-radius: 50%;
    color: var(--danger);
    display: inline-flex;
    font-size: 0;
    height: 15px;
    justify-content: center;
    margin: 0 0 0 4px;
    padding: 0;
    width: 15px;
}

.ts-wrapper.plugin-remove_button .item .remove::before{
    content: "x";
    font-size: 11px;
    line-height: 1;
}

.ts-dropdown{
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    color: var(--primary);
    font-size: 12px;
    margin-top: 6px;
    overflow: hidden;
}

.ts-dropdown .option{
    padding: 9px 12px;
}

.ts-dropdown .active{
    background: rgba(0, 0, 0, 0.08);
    color: var(--primary);
}

.ts-control input{
    color: var(--primary);
    font-size: 12px;
}

.lead-form-section-title{
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 14px;
}

.lead-editor{
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 24px;
    overflow: hidden;
}

.lead-editor .ql-toolbar.ql-snow{
    background: rgba(255, 255, 255, 0.28);
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    padding: 7px 14px;
}

.lead-editor .ql-container.ql-snow{
    border: 0;
    font-family: var(--font-primary);
    font-size: 12px;
}

.lead-editor .ql-editor{
    min-height: 150px;
    padding: 12px 16px;
}

.lead-editor .ql-editor.ql-blank::before{
    color: rgba(0, 0, 0, 0.45);
    font-style: normal;
    left: 16px;
    right: 16px;
}

.lead-editor-small .ql-editor{
    min-height: 100px;
}

.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label{
    padding: 0 4px;
}

.modal .form-actions{
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}


/* ==================================================
   LEADS
================================================== */

.leads-page{
    color: var(--primary);
}

.leads-header{
    position: relative;
}

.leads-stats{
    flex: 1;
}

.add-button{
    align-items: center;
    background: var(--secondary);
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 44px;
    font-size: 34px;
    font-weight: 300;
    height: 44px;
    justify-content: center;
    line-height: 1;
    margin-top: -10px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    width: 44px;
    padding-top: 6px;
}

.add-button:hover,
.add-button:focus{
    background: var(--primary);
    color: var(--secondary);
    text-decoration: none;
    transform: translateY(-2px);
}

.leads-kanban{
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding: 5px 0 18px;
}

.lead-column{
    border-radius: 18px;
    min-width: 220px;
}

.lead-column-header{
    border-left: 3px solid var(--lead-status-color, var(--primary));
    margin-bottom: 18px;
    padding-left: 10px;
}

.lead-column-list{
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 280px;
    transition: background 0.18s ease, outline-color 0.18s ease;
}

.is-dragging-lead .lead-column-list{
    border-radius: 28px;
    outline: 1px dashed rgba(0, 0, 0, 0.18);
    outline-offset: 8px;
}

.lead-card{
    aspect-ratio: 230 / 125;
    cursor: grab;
    min-height: 150px;
    padding: 24px 16px 13px;
}

.lead-card:active,
.lead-card-chosen{
    cursor: grabbing;
}

.lead-card-ghost{
    opacity: 0.35;
}

.lead-card-drag{
    transform: rotate(1deg);
}

/* ==================================================
   TASKBOARD
================================================== */

.taskboard-page{
    color: var(--primary);
}

.taskboard-page.is-loading .taskboard-progress,
.taskboard-page.is-loading .taskboard-kanban{
    opacity: 0.58;
    pointer-events: none;
}

.taskboard-filters{
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.taskboard-filters summary{
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    gap: 16px;
    justify-content: space-between;
}

.taskboard-filters-title{
    flex: 0 0 auto;
}

.taskboard-filter-summary{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.taskboard-filter-chip{
    align-items: center;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    display: inline-flex;
    gap: 6px;
    max-width: 260px;
    min-height: 28px;
    padding: 4px 10px;
}

.taskboard-filter-chip strong{
    color: rgba(0, 0, 0, 0.55);
    font-size: 10px;
    text-transform: uppercase;
}

.taskboard-filter-chip span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taskboard-filters form{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    margin-top: 14px;
}

.taskboard-filters label{
    display: grid;
    gap: 7px;
    min-width: 0;
}

.taskboard-filters label span{
    color: rgba(0, 0, 0, 0.56);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.taskboard-filters select{
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    color: var(--primary);
    min-height: 94px;
    padding: 9px;
}

.taskboard-filters select:not([multiple]){
    min-height: 42px;
}

.taskboard-scope{
    align-self: end;
    display: flex;
    gap: 8px;
}

.taskboard-scope label{
    align-items: center;
    background: rgba(255, 255, 255, 0.66);
    border-radius: 999px;
    display: inline-flex;
    gap: 7px;
    padding: 9px 12px;
}

.taskboard-scope input{
    margin: 0;
}

.taskboard-filters-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.taskboard-filters .btn{
    align-self: end;
}

.taskboard-progress{
    margin-bottom: 22px;
}

.taskboard-progress-bar{
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    display: flex;
    height: 10px;
    overflow: hidden;
}

.taskboard-progress-bar span{
    background: var(--status-color);
    min-width: 2px;
}

.taskboard-progress-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 10px;
}

.taskboard-progress-legend span{
    align-items: center;
    color: rgba(0, 0, 0, 0.62);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
}

.taskboard-progress-legend i{
    background: var(--status-color);
    border-radius: 50%;
    display: inline-flex;
    height: 9px;
    width: 9px;
}

.taskboard-kanban{
    display: flex;
    gap: 32px;
    overflow-x: auto;
    padding: 4px 0 18px;
}

.taskboard-column{
    min-width: 220px;
}

.taskboard-column-strip{
    background: var(--status-color);
    border-radius: 999px;
    height: 5px;
    margin-bottom: 12px;
}

.taskboard-column-header{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.taskboard-column-header h2{
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.taskboard-column-header span{
    color: rgba(0, 0, 0, 0.56);
    font-size: 12px;
    font-weight: 800;
}

.taskboard-column-list{
    display: grid;
    gap: 12px;
    min-height: 130px;
    transition: outline-color 0.18s ease;
}

.is-dragging-taskboard .taskboard-column-list{
    border-radius: 18px;
    outline: 1px dashed rgba(0, 0, 0, 0.18);
    outline-offset: 7px;
}

.taskboard-card{
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 16px;
    cursor: grab;
    display: grid;
    gap: 8px;
    padding: 14px;
}

.taskboard-card:active,
.taskboard-card-chosen{
    cursor: grabbing;
}

.taskboard-card-ghost{
    opacity: 0.36;
}

.taskboard-card-drag{
    transform: rotate(1deg);
}

.taskboard-card-kicker,
.taskboard-card-project{
    color: rgba(0, 0, 0, 0.52);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.taskboard-card h3{
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.taskboard-card-footer{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}

.taskboard-card-footer span{
    font-size: 12px;
    font-weight: 800;
}

.taskboard-card-footer img{
    border-radius: 50%;
    height: 28px;
    object-fit: cover;
    width: 28px;
}

.lead-single-page, .cliente-single-page{
    color: var(--primary);
    min-height: calc(100vh - 210px);
    position: relative;
}

.lead-single-breadcrumb, .cliente-single-breadcrumb{
    color: rgba(0, 0, 0, 0.48);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.page-header-actions, .lead-single-actions, .cliente-single-actions{
    align-items: center;
    align-self: flex-start;
    display: flex;
    gap: 10px;
}

.page-header-action, .lead-single-action, .cliente-single-action{
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    color: var(--secondary);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease;
    width: 44px;
}

.page-header-action:hover,
.page-header-action:focus,
.lead-single-action:hover,
.lead-single-action:focus,
.cliente-single-action:hover,
.cliente-single-action:focus{
    background: rgba(0, 0, 0, 0.78);
    transform: translateY(-2px);
}

.page-header-action .kb-icon,
.lead-single-action .kb-icon,
.cliente-single-action .kb-icon{
    height: 20px;
    width: 20px;
}

.lead-single-grid, .cliente-single-grid{
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(245px, 294px) minmax(360px, 1fr) minmax(150px, 185px);
}

.lead-single-sidebar, .cliente-single-sidebar{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lead-single-card, .cliente-single-card{
    background: var(--bgopacity);
    border-radius: 22px;
    color: var(--primary);
    padding: 20px;
}

.lead-single-card.shape-card, .cliente-single-card.shape-card{
    background: transparent;
    border: 0;
    border-radius: 22px;
    padding: 20px;
}

.lead-single-card.shape-card:hover,
.lead-single-card.shape-card:focus,
.lead-single-card.shape-card:focus-within{
    transform: none;
}

.lead-single-card .card-actions{
    right: 0;
    top: 0;
}

.lead-single-card .card-icon{
    color: var(--primary);
    height: 42px;
    width: 42px;
}

.lead-single-card .card-icon:disabled{
    cursor: not-allowed;
    opacity: 0.45;
}

.lead-single-card h2,
.lead-single-history h2{
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 6px;
}

.lead-single-contact-name,
.lead-single-project-heading p{
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
}

/* ==================================================
   CLIENTE SINGLE - COMPANY CARD
================================================== */
.cliente-single-company-card{
    background: rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    display: block;
    min-height: 300px;
    overflow: visible;
    padding: 20px 28px 30px;
    position: relative;
}

.cliente-single-profile{
    display: grid;
    gap: 24px;
    width: min(420px, 100%);
}

.cliente-single-profile > section{
    min-width: calc(100% - 22px);
}

.cliente-single-workspace{
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
}

.cliente-single-company-card .card-actions{
    right: 0;
    top: 0;
}

.cliente-single-company-card .card-icon{
    color: var(--primary);
    height: 44px;
    width: 44px;
}

.cliente-single-company-card .card-icon:disabled{
    cursor: not-allowed;
    opacity: 0.45;
}

.cliente-single-avatar{
    height: 120px;
    left: -2px;
    object-fit: cover;
    position: absolute;
    top: 2px;
    width: 120px;
    border-radius: 50%;
    z-index: 2;
}

.cliente-single-summary{
    margin-left: 125px;
    min-height: 118px;
    padding-top: 1px;
    padding-right: 28px;
}

.cliente-single-summary p{
    font-size: 13px;
    line-height: 1.35;
    margin: 0 0 6px;
}

.cliente-single-summary .cliente-single-person{
    margin-top: 2px;
}

.cliente-single-company-card h2{
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 8px;
}

.cliente-single-mail{
    position: absolute;
    right: -1px;
    top: 2px;
}

.cliente-single-mail-button{
    align-items: center;
    background: rgba(0, 0, 0, 0.16);
    border: 0;
    border-radius: 50%;
    color: #000000;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.cliente-single-mail-button .kb-icon{
    height: 24px;
    width: 24px;
}

.cliente-single-mail-button:disabled{
    cursor: not-allowed;
    opacity: 0.48;
}

.cliente-single-details{
    display: grid;
    gap: 6px 18px;
    grid-template-columns: 84px minmax(0, 1fr);
    margin: 10px 0 0;
}

.cliente-single-details dt{
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
}

.cliente-single-details dd{
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

.cliente-single-details div{
    display: contents;
}

.cliente-single-notes-card{
    background: rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    min-height: 100px;
    padding: 30px;
}

.cliente-single-notes-card h2{
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
}

.cliente-single-notes-card p{
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.cliente-single-tabs{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.cliente-single-tab{
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    min-height: 34px;
    padding: 7px 14px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cliente-single-tab:hover,
.cliente-single-tab:focus,
.cliente-single-tab.is-active{
    background: var(--primary);
    border-color: var(--primary);
    color: var(--secondary);
}

.cliente-single-tab-pane{
    min-height: 342px;
}

.cliente-single-tab-pane h2{
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
}

.cliente-projects-grid{
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.cliente-projects-grid .project-card{
    min-height: 225px;
    width: 100%;
}

.cliente-finance-grid{
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
}

.cliente-single-table-toolbar{
    margin: 18px 0;
}

.cliente-single-table-wrap{
    border-radius: 24px;
}

.cliente-single-table{
    min-width: 720px;
}

.cliente-single-pagination{
    margin: 14px 0 24px;
}

.cliente-current-account{
    display: grid;
    gap: 0;
    position: relative;
}

.cliente-current-item{
    display: grid;
    gap: 4px;
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 0 0 18px 22px;
    position: relative;
}

.cliente-current-item::before{
    background: var(--primary);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 2px;
    position: absolute;
    top: 4px;
    width: 8px;
}

.cliente-current-item::after{
    background: rgba(0, 0, 0, 0.22);
    content: "";
    left: 5px;
    position: absolute;
    top: 16px;
    bottom: 0;
    width: 1px;
}

.cliente-current-item:last-child::after{
    display: none;
}

.cliente-current-item time,
.cliente-current-item span{
    font-size: 12px;
    line-height: 1.35;
}

.cliente-current-item strong{
    font-size: 13px;
    line-height: 1.25;
}

.cliente-current-item span{
    grid-column: 2;
    opacity: 0.7;
}

.cliente-file-manager{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.cliente-file-item{
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 16px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.cliente-file-item:hover,
.cliente-file-item:focus{
    background: rgba(255, 255, 255, 0.82);
    transform: translateY(-2px);
}

.cliente-file-icon{
    align-items: center;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.cliente-file-icon .kb-icon{
    height: 20px;
    width: 20px;
}

.cliente-file-item strong{
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cliente-file-item small,
.cliente-single-empty-state{
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
    opacity: 0.68;
}

.lead-single-details{
    display: grid;
    gap: 4px;
    margin: 12px 0 0;
}

.lead-single-details div{
    display: grid;
    gap: 8px;
    grid-template-columns: 76px minmax(0, 1fr);
}

.lead-single-details dt,
.lead-single-details dd{
    font-size: 11px;
    line-height: 1.25;
    margin: 0;
}

.lead-single-details dt{
    font-weight: 500;
}

.lead-single-details dd{
    overflow-wrap: anywhere;
}

.lead-single-notes-card{
    min-height: 348px;
}

.lead-single-project-card{
    min-height: 570px;
}

.lead-single-project-heading{
    align-items: start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lead-single-probability{
    align-items: center;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    min-height: 28px;
    padding: 5px 12px;
}

.lead-single-label{
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    margin: 7px 0;
}

.lead-single-textarea{
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-radius: 18px;
    color: var(--primary);
    font-size: 12px;
    line-height: 1.45;
    outline: 0;
    padding: 16px;
    resize: none;
    width: 100%;
}

.lead-single-textarea::placeholder{
    color: rgba(0, 0, 0, 0.45);
}

.lead-single-description{
    min-height: 473px;
}

.lead-single-notes{
    min-height: 288px;
}

.lead-single-history{
    padding: 4px 0 0;
}

.lead-single-history-list{
    display: grid;
    gap: 19px;
    margin-top: 16px;
}

.lead-single-history-item time{
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 5px;
}

.lead-single-history-item p{
    font-size: 13px;
    line-height: 1.25;
    margin: 0;
}

.lead-single-empty{
    max-width: 520px;
}

/* ==================================================
   PROJETOS
================================================== */

.projetos-page{
    color: var(--primary);
}

.projetos-header{
    position: relative;
}

.projetos-stats{
    flex: 1;
}

.projetos-filterbar{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.projetos-filter{
    align-items: center;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.64);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    min-height: 42px;
    padding: 0 18px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.projetos-filter:hover,
.projetos-filter:focus,
.projetos-filter.is-active{
    background: var(--secondary);
    color: var(--primary);
    transform: translateY(-1px);
}

.projetos-grid{
    align-items: stretch;
}

.projetos-grid .project-card{
    height: 100%;
}

.projetos-empty{
    max-width: 480px;
    min-height: 190px;
    padding: 32px;
}

.projetos-empty h2{
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}

.projetos-empty p{
    color: rgba(0, 0, 0, 0.62);
    margin: 0;
}

.projeto-form-main{
    width: 100%;
}

.projeto-users-select{
    min-height: 142px;
}

.projeto-visibility-check{
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
}

.projeto-visibility-check input{
    accent-color: var(--primary);
    height: 18px;
    width: 18px;
}

.projeto-visibility-check span{
    font-size: 13px;
    font-weight: 600;
}

/* ==================================================
   TAREFAS
================================================== */

.tasks-shell{
    align-items: flex-start;
    color: var(--primary);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 4fr) minmax(320px, 3fr);
}

.tasks-main{
    min-width: 0;
}

.tasks-back-link{
    color: rgba(0, 0, 0, 0.58);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    text-decoration: none;
}

.task-project-group{
    margin-bottom: 28px;
}

.task-project-heading{
    align-items: flex-end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.task-project-heading span{
    color: rgba(0, 0, 0, 0.54);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
}

.task-project-heading h2{
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.task-project-heading a{
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.task-work-list{
    display: grid;
}

.task-quick-add{
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 999px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 39px;
    margin-bottom: 16px;
    min-height: 46px;
    padding: 4px 5px 4px 18px;
}

.task-quick-add input{
    background: transparent;
    border: 0;
    color: var(--primary);
    font-size: 14px;
    min-width: 0;
    outline: 0;
}

.task-quick-add button{
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    color: var(--secondary);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}

.task-quick-add button:disabled{
    opacity: 0.55;
}

.task-quick-add svg{
    height: 17px;
    width: 17px;
}

.task-work-card{
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 22px;
    display: grid;
    gap: 14px;
    grid-template-columns: 8px minmax(0, 1fr) auto 42px;
    min-height: 92px;
    padding: 16px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.task-work-card:hover{
    transform: translateY(-1px);
}

.task-work-card.is-dimmed{
    opacity: 0.42;
}

.task-work-status{
    background: var(--task-status-color);
    border-radius: 999px;
    height: 100%;
    min-height: 46px;
    width: 8px;
}

.task-work-main{
    min-width: 0;
}

.task-work-kicker{
    color: rgba(0, 0, 0, 0.52);
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 700;
    gap: 10px;
    margin-bottom: 6px;
}

.task-work-card h3{
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.task-work-card p{
    color: rgba(0, 0, 0, 0.62);
    font-size: 13px;
    line-height: 1.35;
    margin: 6px 0 0;
}

.task-work-meta{
    align-items: flex-end;
    color: rgba(0, 0, 0, 0.62);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    white-space: nowrap;
}

.task-work-avatar,
.tasks-summary-user img{
    border-radius: 50%;
    height: 42px;
    object-fit: cover;
    width: 42px;
}

.tasks-summary-panel{
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 28px;
    max-height: calc(100vh - 180px);
    padding: 22px;
    position: sticky;
    top: 24px;
    transition: height 0.28s ease, top 0.28s ease;
    overflow: auto;
}

body.is-topbar-hidden .tasks-summary-panel{
    max-height: calc(100vh - 40px);
}

.tasks-summary-search{
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.project-summary {
    height: auto;
    overflow: auto;
}

.project-footer{
    margin-bottom: -22px;
}

.tasks-summary-search span,
.tasks-summary-progress span,
.project-summary-detail span,
.project-summary-description span,
.tasks-summary-hours span,
.tasks-summary-stats span,
.tasks-summary-user span{
    color: rgba(0, 0, 0, 0.56);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.tasks-summary-search input{
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    min-height: 42px;
    padding: 0 16px;
}

.tasks-summary-user{
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.tasks-summary-user strong{
    display: block;
    font-size: 15px;
    line-height: 1.2;
}

.tasks-summary-progress{
    margin-bottom: 20px;
}

.tasks-summary-progress > strong{
    display: block;
    font-size: 34px;
    line-height: 1;
    margin-top: 4px;
}

.tasks-summary-stats{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 18px;
}

.tasks-summary-stats div,
.tasks-summary-hours div,
.project-summary-detail,
.project-summary-description{
    background: rgba(255, 255, 255, 0.58);
    border-radius: 18px;
    padding: 13px;
}

.tasks-summary-stats strong{
    display: block;
    font-size: 22px;
    line-height: 1;
}

.tasks-summary-stats span{
    display: block;
    margin-top: 6px;
    text-transform: none;
}

.tasks-summary-hours{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.tasks-summary-hours strong,
.project-summary-detail strong{
    display: block;
    font-size: 18px;
    line-height: 1.2;
    margin-top: 6px;
}

.project-summary-head{
    margin-bottom: 18px;
}

.project-summary-head span{
    color: rgba(0, 0, 0, 0.58);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.project-summary-head h2{
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    margin: 4px 0 0;
}

.project-summary-detail,
.project-summary-description{
    margin-bottom: 14px;
}

.project-summary-description p{
    font-size: 13px;
    line-height: 1.45;
    margin: 8px 0 0;
}

.project-summary-hours-block{
    margin-bottom: 18px;
}

.project-summary-section-head{
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.project-summary-section-head h3{
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.project-xls-download{
    align-items: center;
    background: var(--primary);
    border-radius: 50%;
    color: var(--secondary);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    transform: rotate(180deg);
    width: 30px;
}

.project-xls-download:hover,
.project-xls-download:focus{
    color: var(--secondary);
    transform: rotate(180deg) translateY(1px);
}

.project-xls-download .kb-icon{
    height: 15px;
    width: 15px;
}

.project-summary-users,
.project-files-panel{
    margin-top: 22px;
}

.project-summary-users h3,
.project-files-panel h3{
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 12px;
}

.project-file-manager{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-file-upload-form{
    margin: 0;
    min-width: 0;
}

.project-file-drop{
    align-content: center;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.project-file-drop:hover,
.project-file-drop:focus-within,
.project-file-upload-form.is-drag-over .project-file-drop{
    border-color: rgba(0, 0, 0, 0.42);
    transform: translateY(-1px);
}

.project-file-upload-form.is-drag-over .project-file-drop{
    border-color: var(--primary);
}

.project-file-upload-form.is-uploading .project-file-drop{
    animation: projectUploadPulse 0.9s ease infinite alternate;
    border-color: var(--primary);
}

.project-file-drop input{
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.project-file-drop-zone{
    align-items: center;
    color: rgba(0, 0, 0, 0.48);
    display: inline-flex;
    height: 52px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.project-file-drop-zone .kb-icon{
    height: 44px;
    width: 44px;
}

.project-file-drop-zone img{
    border-radius: 7px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.project-file-drop strong{
    color: rgba(0, 0, 0, 0.38);
    display: block;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: center;
}

.project-file-item{
    align-content: center;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 2px dashed rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    gap: 8px;
    min-height: 0;
    padding: 10px;
    position: relative;
}

.project-file-item:hover,
.project-file-item:focus{
    background: transparent;
    border-color: rgba(0, 0, 0, 0.34);
}

.project-file-thumb{
    background: transparent;
    height: 38px;
    justify-self: center;
    width: 38px;
}

.project-file-item strong{
    font-size: 12px;
    text-align: center;
}

.project-file-item small{
    font-size: 10px;
    text-align: center;
}

.project-file-delete{
    align-items: center;
    background: var(--danger);
    border: 0;
    border-radius: 50%;
    color: var(--secondary);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    right: 6px;
    top: 6px;
    transition: opacity 0.15s ease, transform 0.15s ease;
    width: 24px;
}

.project-file-item:hover .project-file-delete,
.project-file-item:focus-within .project-file-delete{
    opacity: 1;
    pointer-events: auto;
}

.project-file-delete:hover,
.project-file-delete:focus{
    transform: scale(1.06);
}

.project-file-delete .kb-icon{
    height: 13px;
    width: 13px;
}

@keyframes projectUploadPulse{
    from{
        transform: translateY(-1px) scale(1);
    }
    to{
        transform: translateY(-1px) scale(0.98);
    }
}

.tasks-empty{
    max-width: 520px;
    min-height: 170px;
    padding: 30px;
}

.tasks-empty h2{
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
}

.tasks-empty p{
    color: rgba(0, 0, 0, 0.62);
    margin: 0;
}


/* ==================================================
   CLIENTES
================================================== */

.clientes-page{
    color: var(--primary);
}

.clientes-header{
    position: relative;
}

.clientes-stats{
    flex: 1;
}

.clientes-table-toolbar{
    margin: 22px 0;
}

.clientes-page-size select{
    appearance: auto;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    color: var(--primary);
    font-size: 14px;
    min-height: 32px;
    padding: 3px 10px;
    width: 64px;
}

.clientes-search{
    align-items: center;
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.clientes-search span{
    font-size: 15px;
    font-weight: 600;
}

.clientes-search input{
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    min-height: 32px;
    outline: 0;
    padding: 4px 14px;
    width: 155px;
}

.clientes-search input:focus,
.clientes-page-size select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.clientes-table-wrap{
    background: rgba(255, 255, 255, 0.52);
    border-radius: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.clientes-table{
    border-collapse: collapse;
    margin: 0;
    min-width: 900px;
    width: 100%;
}

.clientes-table th,
.clientes-table td{
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    padding: 17px 26px;
    text-align: left;
    vertical-align: middle;
}

.clientes-table th{
    font-size: 14px;
    font-weight: 500;
}

.clientes-table td{
    font-size: 15px;
    font-weight: 600;
}

.clientes-table tbody tr:last-child td{
    border-bottom: 0;
}

.cliente-name-cell{
    align-items: center;
    display: flex;
    gap: 12px;
}

.cliente-avatar{
    border-radius: 50%;
    height: 36px;
    object-fit: cover;
    width: 36px;
}

.cliente-name-cell strong,
.cliente-name-cell span{
    display: block;
    line-height: 1.1;
}

.cliente-name-cell strong{
    font-size: 15px;
}

.cliente-name-cell span{
    font-size: 13px;
    font-weight: 400;
    margin-top: 4px;
}

.cliente-actions{
    padding-right: 18px !important;
    text-align: right !important;
    width: 38px;
}

.cliente-actions button{
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    display: inline-flex;
    font-size: 26px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 30px;
}

.cliente-actions button:hover,
.cliente-actions button:focus{
    background: rgba(0, 0, 0, 0.08);
}

.cliente-actions .dropdown{
    display: inline-flex;
}

.cliente-actions-menu{
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    min-width: 120px;
    padding: 6px;
}

.cliente-actions-menu .dropdown-item{
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 10px;
}

.cliente-actions-menu .dropdown-item:hover,
.cliente-actions-menu .dropdown-item:focus{
    background: rgba(0, 0, 0, 0.08);
}

.cliente-actions-menu .dropdown-item.text-danger:hover,
.cliente-actions-menu .dropdown-item.text-danger:focus{
    background: var(--dangerbg);
    color: var(--danger) !important;
}

.clientes-pagination{
    align-items: center;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    display: inline-flex;
    float: right;
    gap: 10px;
    margin-top: 16px;
    padding: 2px 7px;
}

.clientes-pagination button{
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--primary);
    display: inline-flex;
    font-size: 26px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 18px;
}

.clientes-pagination button:hover,
.clientes-pagination button:focus{
    background: rgba(0, 0, 0, 0.08);
}

.clientes-pagination button:disabled{
    cursor: not-allowed;
    opacity: 0.35;
}

.clientes-pagination span{
    font-size: 14px;
    line-height: 1;
}

.dt-container .dt-empty{
    padding: 32px !important;
    text-align: center !important;
}

.cliente-form-modal .modal-dialog{
    max-width: min(735px, calc(100vw - 28px));
}

.cliente-form-content{
    background: rgba(255, 255, 255, 0.96);
    border: 0;
    border-radius: 28px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.cliente-form-body{
    padding: 12px 26px 30px;
}

.cliente-form-layout{
    display: grid;
    gap: 20px;
    grid-template-columns: 96px minmax(0, 1fr);
}

.cliente-avatar-field{
    height: 96px;
    position: relative;
    width: 96px;
    border-radius: 50%;
    overflow: hidden;
}

.cliente-avatar-preview{
    align-items: center;
    background: #d9d9d9;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: flex;
    height: 96px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 96px;
}

.cliente-avatar-image{
    display: none;
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.cliente-avatar-field.has-image .cliente-avatar-image{
    display: block;
}

.cliente-avatar-field.has-image .cliente-avatar-preview span{
    display: none;
}

.cliente-avatar-preview span::before{
    border: 5px solid var(--primary);
    border-radius: 50%;
    content: "";
    height: 34px;
    left: 50%;
    position: absolute;
    top: 22px;
    transform: translateX(-50%);
    width: 34px;
}

.cliente-avatar-preview span::after{
    border: 5px solid var(--primary);
    border-bottom: 0;
    border-radius: 42px 42px 0 0;
    content: "";
    height: 32px;
    left: 50%;
    position: absolute;
    top: 58px;
    transform: translateX(-50%);
    width: 54px;
}

.cliente-avatar-edit{
    background: rgba(0, 0, 0, 0.42);
    border: 0;
    border-radius: 0 0 999px 999px;
    bottom: 0;
    color: var(--secondary);
    font-size: 13px;
    left: 0;
    min-height: 29px;
    position: absolute;
    width: 96px;
    z-index: 5;
}

.cliente-form-main h3{
    font-size: 20px;
    font-weight: 700;
    margin: 4px 0 10px;
}

.cliente-form-main h3:not(:first-child){
    margin-top: 24px;
}

.cliente-form-control{
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    color: var(--primary);
    font-size: 14px;
    min-height: 32px;
    padding: 6px 14px;
}

select.cliente-form-control{
    appearance: none;
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 36px;
}

.cliente-form-control:focus{
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.cliente-address-field{
    position: relative;
}

.cliente-address-suggestions{
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    display: none;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
}

.cliente-address-suggestions.is-open{
    display: block;
}

.cliente-address-suggestion{
    background: transparent;
    border: 0;
    color: var(--primary);
    display: block;
    padding: 10px 14px;
    text-align: left;
    width: 100%;
}

.cliente-address-suggestion:hover,
.cliente-address-suggestion:focus{
    background: rgba(0, 0, 0, 0.08);
}

.cliente-address-suggestion strong,
.cliente-address-suggestion span{
    display: block;
    line-height: 1.2;
}

.cliente-address-suggestion strong{
    font-size: 13px;
    font-weight: 700;
}

.cliente-address-suggestion span{
    font-size: 12px;
    margin-top: 3px;
    opacity: 0.65;
}

.cliente-form-textarea{
    border-radius: 18px;
    min-height: 78px;
    resize: vertical;
}

.cliente-form-modal .form-actions{
    margin-top: 36px;
}

.cliente-form-submit{
    min-width: 135px;
}

.cliente-vault-client-name{
    color: rgba(0, 0, 0, 0.58);
    font-size: 13px;
    font-weight: 700;
    margin: -4px 0 18px;
}

.cliente-vault-steps{
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.cliente-vault-steps span{
    align-items: center;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.54);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.cliente-vault-steps span.is-active{
    background: var(--primary);
    color: var(--secondary);
}

.cliente-vault-step{
    display: none;
}

.cliente-vault-step.is-active{
    display: block;
}

.cliente-vault-step h3{
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

.cliente-vault-step p{
    color: rgba(0, 0, 0, 0.58);
    font-size: 13px;
    line-height: 1.45;
    margin: 12px 0 0;
}

.cliente-vault-textarea{
    min-height: 280px;
}

.cliente-vault-status{
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

[data-cliente-vault].is-loading{
    cursor: wait;
    opacity: 0.78;
}

.shape-card{
    background: transparent;
    border-radius: 28px;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
    text-decoration: none;
    transition: transform 0.18s ease;
    --shape-card-cutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53.64 53.64'%3E%3Cpath d='M53.63 18.75V0H0c10.47.48 15.99 9.49 15.99 18.83 0 5.19 2.1 9.88 5.49 13.29l.04.04.01.01c3.4 3.39 8.09 5.48 13.27 5.49 9.34 0 18.34 5.51 18.83 15.99V18.75Z' fill='black'/%3E%3C/svg%3E");
    --shape-card-cutout-size: 65px 65px;
}

.shape-card.is-shape-avatar{
    --shape-card-cutout-avatar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148.02 148.02'%3E%3Cpath d='M27.5,120.02h32.51c33.14,0,60.01-26.87,60.01-60.01V27.5c0-15.19,12.31-27.5,27.5-27.5H0v147.52c0-15.19,12.31-27.5,27.5-27.5Z'/%3E%3Cpath d='M148.02,0h-.5c.17,0,.33,0,.5.01h0Z'/%3E%3Cpath d='M0,147.52v.5h.01c0-.17-.01-.33-.01-.5Z'/%3E%3C/svg%3E");
    --shape-card-cutout-size-avatar: 148px 148px;
}

.shape-card::before{
    background: var(--bgopacity);
    border-radius: inherit;
    content: "";
    inset: 0;
    -webkit-mask-image:
        linear-gradient(#000 0 0),
        var(--shape-card-cutout);
    -webkit-mask-position: 0 0, top right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, var(--shape-card-cutout-size);
    -webkit-mask-composite: source-over, xor;
    mask-image:
        linear-gradient(#000 0 0),
        var(--shape-card-cutout);
    mask-position: 0 0, top right;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, var(--shape-card-cutout-size);
    mask-composite: exclude;
    position: absolute;
    transition: background 0.18s ease;
    z-index: 0;
}
.shape-card.is-shape-avatar::before{
    border-radius: 0 0 28px 0;
    width: 50%;
    transform: translate(100%, 0px);
}

.shape-card.is-shape-avatar::after {
    background: var(--bgopacity);
    border-radius: 28px 0 0 28px;
    content: "";
    inset: 0;
    -webkit-mask-image: linear-gradient(#000 0 0), var(--shape-card-cutout-avatar);
    -webkit-mask-position: 0 0, top left;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%, var(--shape-card-cutout-size-avatar);
    -webkit-mask-composite: source-over, xor;
    mask-image: linear-gradient(#000 0 0), var(--shape-card-cutout-avatar);
    mask-position: 0 0, top left;
    mask-repeat: no-repeat;
    mask-size: 100% 100%, var(--shape-card-cutout-size-avatar);
    mask-composite: exclude;
    position: absolute;
    transition: background 0.18s ease;
    z-index: 0;
    width: 50%;
}

.shape-card:hover,
.shape-card:focus,
.shape-card:focus-within{
    text-decoration: none;
    transform: translateY(-2px);
}

.shape-card > *{
    position: relative;
    z-index: 1;
}

.shape-card.doubleicons{
    --shape-card-cutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92.62 53.64'%3E%3Cpath d='M53.64 0H0c10.47.48 15.99 9.49 15.99 18.83 0 5.19 2.1 9.88 5.49 13.29 3.41 3.42 8.12 5.53 13.33 5.53h38.98c9.34 0 18.34 5.51 18.83 15.99V0H53.64Z' fill='black'/%3E%3C/svg%3E");
    --shape-card-cutout-size: 110px 63px;
}

.card-shape-avatar{
    position: absolute;
    top: 0;
    left: 0;
}

/* ==================================================
   UTILIZADORES
================================================== */

.utilizadores-page{
    color: var(--primary);
}

.utilizadores-header{
    position: relative;
}

.user-name-cell{
    align-items: center;
    display: flex;
    gap: 12px;
}

.user-avatar{
    border-radius: 50%;
    height: 36px;
    object-fit: cover;
    width: 36px;
}

.user-name-cell strong,
.user-name-cell span{
    display: block;
    line-height: 1.1;
}

.user-name-cell strong{
    font-size: 15px;
}

.user-name-cell span{
    font-size: 13px;
    font-weight: 400;
    margin-top: 4px;
}

.utilizador-actions{
    padding-right: 18px !important;
    text-align: right !important;
    width: 38px;
}

.utilizador-actions button{
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    display: inline-flex;
    font-size: 26px;
    height: 30px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 30px;
}

.utilizador-actions button:hover,
.utilizador-actions button:focus{
    background: rgba(0, 0, 0, 0.08);
}

.utilizador-actions .dropdown{
    display: inline-flex;
}

.user-actions-menu{
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
    min-width: 120px;
    padding: 6px;
}

.user-actions-menu .dropdown-item{
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 10px;
}

.user-actions-menu .dropdown-item:hover,
.user-actions-menu .dropdown-item:focus{
    background: rgba(0, 0, 0, 0.08);
}

.user-actions-menu .dropdown-item.text-danger:hover,
.user-actions-menu .dropdown-item.text-danger:focus{
    background: var(--dangerbg);
    color: var(--danger) !important;
}

/* ==================================================
   CARD ACTIONS
================================================== */

.card-actions{
    align-items: center;
    display: flex;
    gap: 2px;
    position: absolute;
    right: 2px;
    top: 0;
    z-index: 2;
}

.card-icon{
    align-items: center;
    background: #B8B8B8;
    border-radius: 50%;
    display: inline-flex;
    font-size: 20px;
    height: 45px;
    justify-content: center;
    width: 45px;
    z-index: 2;
    transition: transform 0.18s ease;
    border: 0;
}

.card-icon svg{
    transition: transform 0.18s ease;
}

.card-icon.icon-secundary{
    background: #cecece;
}

.card-icon.icon-secundary svg{
    opacity: 0.4;
}

.card-icon.icon-secundary:hover{
    background: #B8B8B8;
}

.card-icon.icon-secundary:hover svg{
    opacity: 1;
}

.card-icon.arrowrotate:hover svg,
.arrowrotate:hover .card-icon.arrowrotate svg{
    transform: rotate(45deg);
}

.lead-title{
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 auto;
}

.lead-date{
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
}


/* ==================================================
   DASHBOARD
================================================== */

.workspace-stats{
    margin-top: -3px;
}

.stat-item{
    min-width: 130px;
}

.stat-num{
    line-height: 0.88;
    margin-right: 10px;
    margin-bottom: 0;
}

.stat-label{
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    opacity: 0.72;
}

.project-card{
    aspect-ratio: 1.43;
    padding: 22px 24px 24px;
}

.project-card-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 46px 14px 0;
    min-height: 23px;
}

.project-card-badges span{
    background: rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    color: rgba(0, 0, 0, 0.68);
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 9px;
}

.avatar-stack{
    align-items: center;
    display: flex;
    height: 42px;
    margin-bottom: 22px;
}

.avatar-badge,
.av{
    border-radius: 50%;
    flex: 0 0 37px;
    height: 37px;
    margin-right: -11px;
    position: relative;
    width: 37px;
}

.avatar-badge{
    align-items: center;
    background: var(--primary);
    color: var(--secondary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    justify-content: center;
    position: relative;
    z-index: 4;
}

.av{
    object-fit: cover;
}

.avatar-stack .av:nth-of-type(1){
    z-index: 3;
}

.avatar-stack .av:nth-of-type(2){
    z-index: 2;
}

.avatar-stack .av:nth-of-type(3){
    z-index: 1;
}

.card-client{
    font-size: 12px;
    line-height: 1;
    margin-bottom: 10px;
        width: calc(100% - 50px);
    line-height: 1.2;
}

.doubleicons .card-client{
    width: calc(100% - 100px);
}

.card-tittle{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.card-footer-info{
    font-size: 12px;
    line-height: 1;
    margin-top: auto;
}

.progress-thin{
    background: transparent;
    border-radius: 999px;
    height: 5px;
    margin-top: 12px;
    overflow: visible;
    position: relative;
}

.progress-thin::after{
    background: var(--primary);
    border-radius: 50%;
    content: "";
    height: 5px;
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
}

.progress-thin .progress-bar{
    background: var(--primary);
    border-radius: 999px;
}

.progress-thin .progress-bar.missing-bar{
    opacity: 0.3;
    margin-left: 3%;
}

.section-heading{
    min-height: 41px;
}

.sprint-count{
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 5px;
}

.task-row{
    align-items: center;
    background: var(--bgopacity);
    border-radius: 999px;
    display: grid;
    gap: 9px;
    grid-template-columns: 39px minmax(0, 1fr) 26px auto 24px;
    min-height: 39px;
    margin-bottom: 13px;
    margin-left: 20px;
    padding: 0 8px 0 0;
    position: relative;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.task-row:hover,
.task-row:focus{
    background: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transform: translateX(3px);
}

.task-row[role="button"]{
    cursor: pointer;
}

.task-row.is-active{
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.task-row.is-dimmed{
    opacity: 0.42;
}

.task-row.is-dimmed.is-active,
.task-row.is-dimmed:hover{
    opacity: 0.78;
}

.task-dot{
    background: var(--task-status-color, var(--success));
    border-radius: 50%;
    height: 10px;
    left: -20px;
    position: absolute;
    top: -4px;
    width: 10px;
    z-index: 2;
}

.task-check{
    align-items: center;
    background: #ffffff;
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    display: inline-flex;
    font-size: 20px;
    height: 39px;
    justify-content: center;
    width: 39px;
    margin-left: -20px;
    padding: 0;
    position: relative;
}

.task-check svg{
    width: 39px;
    height: 39px;
    stroke-width: 2;
}

.task-check.is-final{
    background: var(--success);
    color: var(--secondary);
}

.task-check.is-final svg{
    color: var(--secondary);
    stroke: currentColor;
}

.task-people-popover{
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    display: flex;
    gap: 4px;
    left: 16px;
    opacity: 0;
    padding: 5px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 8;
}

.task-people-popover::before{
    content: "";
    height: 100%;
    left: -12px;
    position: absolute;
    top: 0;
    width: 12px;
}

.task-check:hover + .task-people-popover,
.task-people-popover:hover{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.task-people-popover button{
    background: transparent;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    height: 30px;
    padding: 0;
    width: 30px;
}

.task-people-popover img{
    border-radius: 50%;
    height: 30px;
    object-fit: cover;
    width: 30px;
}

.task-info{
    min-width: 0;
    margin-left: -20px;
}

.task-sub{
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    opacity: 0.58;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.task-name{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-timer{
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--primary);
    display: inline-flex;
    gap: 4px;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    white-space: nowrap;
}

.task-timer svg{
    height: 15px;
    width: 15px;
}

.task-row-delete{
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--danger);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    width: 24px;
}

.task-row:hover .task-row-delete,
.task-row:focus-within .task-row-delete{
    opacity: 1;
    pointer-events: auto;
}

.task-row-delete svg{
    height: 15px;
    width: 15px;
}

.task-row-ghost{
    opacity: 0.35;
}

.task-row-chosen{
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.task-av,
.ticket-av{
    border-radius: 50%;
    object-fit: cover;
}

.task-av{
    height: 24px;
    width: 24px;
}

.task-detail-actions{
    text-align: right;
}

.task-detail-actions > button{
    padding: 6px;
    margin-left: 5px;
}

.task-detail-info{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.task-detail-info > div,
.task-detail-status-button{
    background: rgba(255, 255, 255, 0.58);
    border: 0;
    border-radius: 18px;
    color: var(--primary);
    display: block;
    padding: 13px;
    text-align: left;
    width: 100%;
}

.task-detail-info span,
.task-detail-section h3{
    color: rgba(0, 0, 0, 0.56);
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.task-detail-info strong,
.task-detail-status-button strong{
    display: block;
    font-size: 15px;
    line-height: 1.2;
    margin-top: 5px;
}

.task-detail-user{
    align-items: center;
    display: flex;
    gap: 9px;
    margin-top: 7px;
    min-width: 0;
}

.task-detail-user img{
    border-radius: 50%;
    flex: 0 0 30px;
    height: 30px;
    object-fit: cover;
    width: 30px;
}

.task-detail-user strong{
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-detail-section{
    margin-top: 12px;
}

.task-section-heading{
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.task-detail-section h3{
    margin: 0 0 10px;
}

.task-section-heading h3{
    margin: 0;
}

.task-description-display{
    background: rgba(255, 255, 255, 0.58);
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.45;
    min-height: 84px;
    padding: 14px;
}

.task-description-display img{
    border-radius: 12px;
    display: block;
    height: auto;
    max-width: 100%;
}

.task-quill-editor{
    background: rgba(255, 255, 255, 0.74);
    border-radius: 18px;
    min-height: 180px;
}

.task-autosave-status{
    color: rgba(0, 0, 0, 0.56);
    font-size: 12px;
    font-weight: 700;
    min-height: 18px;
    padding-top: 8px;
}

.task-comments-list,
.task-status-history{
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.task-comment,
.task-status-history-item{
    background: rgba(255, 255, 255, 0.58);
    border-radius: 16px;
    padding: 12px;
    position: relative;
}

.task-comment-delete{
    align-items: center;
    background: rgba(0, 0, 0, 0.08);
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    display: inline-flex;
    font-size: 17px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
}

.task-comment-delete:hover,
.task-comment-delete:focus{
    background: var(--danger);
    color: var(--secondary);
}

.task-comment strong,
.task-status-history-item strong{
    font-size: 13px;
    margin-right: 5px;
}

.task-comment time,
.task-status-history-item span,
.task-empty-line{
    color: rgba(0, 0, 0, 0.56);
    font-size: 12px;
}

.task-comment p,
.task-status-history-item p{
    font-size: 13px;
    line-height: 1.35;
    margin: 7px 0 0;
}

.task-people-list{
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    min-height: 34px;
    padding-left: 4px;
}

.task-person-avatar{
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    flex: 0 0 34px;
    height: 34px;
    margin-left: -4px;
    object-fit: cover;
    width: 34px;
}

.task-person-avatar + .task-person-avatar{
    margin-left: -10px;
}

.task-person-avatar:hover{
    z-index: 2;
}

.task-time-edit-form{
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    margin-top: 16px;
}

.task-time-actions{
    white-space: nowrap;
}

.tickets-heading .ticket-tab{
    --bs-btn-font-size: 12px;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: 0.36rem;
    border-width: 1px;
    line-height: 1;
    min-width: 100px;
}

.ticket-list{
    background: rgba(255, 255, 255, 0.56);
    border-radius: 27px;
    overflow: hidden;
    padding: 0;
}

.ticket-item{
    display: block;
    min-height: 96px;
    padding: 20px 22px 11px;
    position: relative;
    text-decoration: none;
    transition: background 0.18s ease;
}

.ticket-item + .ticket-item{
    padding-top: 7px;
}

.ticket-item:hover,
.ticket-item:focus{
    background: rgba(255, 255, 255, 0.38);
    text-decoration: none;
}

.tickets-breadcrumb{
    align-items: center;
    color: rgba(0, 0, 0, 0.56);
    display: flex;
    font-size: 16px;
    font-weight: 800;
    gap: 10px;
}

.tickets-breadcrumb a,
.tickets-breadcrumb strong{
    color: var(--primary);
    text-decoration: none;
}

.tickets-breadcrumb strong{
    color: #f4bf00;
}

.tickets-stats-grid{
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tickets-stats-grid .stat-card{
    border-radius: 0;
    min-height: 135px;
}

.tickets-stats-grid .stat-card:first-child{
    border-radius: 12px 0 0 12px;
}

.tickets-stats-grid .stat-card:last-child{
    border-radius: 0 12px 12px 0;
}

.tickets-filters{
    display: grid;
    gap: 28px;
    grid-template-columns: 110px minmax(170px, 1fr) minmax(240px, 1.6fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
    margin: 34px 0;
}

.tickets-table-id{
    color: #0076ff;
    text-decoration: none;
}

.ticket-priority,
.ticket-status{
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    gap: 6px;
}

.ticket-priority::before,
.ticket-status::before{
    border: 3px solid currentColor;
    border-radius: 50%;
    content: "";
    height: 12px;
    width: 12px;
}

.ticket-priority-low{ color: #64748b; }
.ticket-priority-normal{ color: #25b358; }
.ticket-priority-high{ color: #f4bf00; }
.ticket-priority-urgent,
.ticket-status-open{ color: #ff2d55; }
.ticket-status-waiting{ color: #f4bf00; }
.ticket-status-closed{ color: #25b358; }

.payment-add-button:not(.page-header-action){
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    gap: 9px;
    min-height: 45px;
    padding-inline: 22px;
}

.payment-add-button:not(.page-header-action) span{
    font-size: 24px;
    line-height: 1;
}

.payment-notes-filters{
    grid-template-columns: 100px minmax(190px, 1.3fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(155px, 1fr) minmax(155px, 1fr) minmax(165px, 1fr) auto;
}

.retainers-filters{
    grid-template-columns: minmax(190px, 1.1fr) minmax(180px, 1fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) minmax(155px, 1fr) minmax(155px, 1fr) auto;
}

.payment-export-actions{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: -16px 0 20px;
}

.payment-total-tax{
    display: block;
    font-weight: 600;
    margin-top: 3px;
    opacity: 0.76;
}

.payment-status{
    align-items: center;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-height: 24px;
    padding: 3px 10px;
}

.payment-status-draft{ background: #64748b; }
.payment-status-sent{ background: #f4bf00; color: var(--primary); }
.payment-status-paid{ background: #25b358; }
.payment-status-cancelled{ background: #6c757d; }
.payment-status-overdue{ background: #ff2d55; }

.payment-note-modal .modal-dialog{
    max-width: min(1000px, calc(100vw - 28px));
}

.payment-note-form h2{
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 28px;
    text-align: center;
}

.payment-note-grid{
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payment-note-options{
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 24px 0 26px;
    padding-bottom: 24px;
}

.payment-note-options fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}

.payment-note-options legend,
.payment-note-form .form-label{
    color: var(--primary);
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 10px;
}

.payment-note-options label{
    align-items: center;
    color: var(--primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 6px;
    margin-right: 14px;
}

.payment-note-lines{
    display: grid;
    gap: 24px;
}

.payment-note-line{
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: grid;
    gap: 20px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding-bottom: 24px;
}

.payment-line-number{
    color: var(--primary);
    font-size: 16px;
    font-weight: 800;
    padding-top: 32px;
}

.payment-line-fields{
    display: grid;
    gap: 18px;
}

.payment-line-top{
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-line-bottom{
    align-items: end;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(260px, 1fr) minmax(130px, 180px) minmax(110px, 150px) 32px;
}

.retainer-line-bottom{
    grid-template-columns: minmax(260px, 1fr) minmax(130px, 180px) minmax(110px, 150px) 32px;
}

.payment-tax-toggle{
    align-items: center;
    background: #f4bf00;
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 20px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    line-height: 1;
    margin-bottom: 6px;
    padding: 0;
    width: 20px;
}

.payment-tax-field[hidden]{
    display: none !important;
}

.payment-line-actions{
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.payment-add-line,
.payment-remove-line{
    background: transparent;
    border: 0;
    font-size: 14px;
    font-weight: 800;
    padding: 0;
}

.payment-add-line{
    color: #f4bf00;
    margin-left: auto;
}

.payment-remove-line{
    color: #ff2d55;
}

.payment-submit{
    min-width: 210px;
}

.ticket-single-page{
    color: var(--primary);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
    margin: -15px -15px 0 0;
    min-height: calc(100vh - 96px);
}

.ticket-single-main{
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 22px;
}

.ticket-single-topbar{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 18px;
}

.ticket-single-topbar span{
    color: #f4bf00;
    font-size: 16px;
    font-weight: 800;
}

.ticket-single-topbar strong{
    font-size: 17px;
}

.ticket-more-button{
    background: transparent;
    border: 0;
    margin-left: auto;
    padding: 4px;
}

.ticket-reply-card,
.ticket-thread-card,
.ticket-linked-tasks{
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-top: 28px;
    padding: 26px;
}

.ticket-reply-head{
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ticket-reply-head h1,
.ticket-section-title h2{
    font-size: 26px;
    font-weight: 900;
    margin: 0;
}

.ticket-reply-textarea,
.ticket-reply-editor{
    min-height: 220px;
}

.ticket-quill-editor{
    background: rgba(255, 255, 255, 0.72);
    border-radius: 18px;
}

.ticket-reply-actions,
.ticket-section-title{
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-top: 18px;
}

.ticket-reply-actions label{
    align-items: center;
    display: inline-flex;
    font-weight: 800;
    gap: 10px;
}

.ticket-message{
    align-items: flex-start;
    display: grid;
    gap: 16px;
    grid-template-columns: 44px minmax(0, 1fr);
    margin-bottom: 22px;
}

.ticket-message img,
.ticket-side-user img{
    border-radius: 50%;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.ticket-message .user-avatar,
.ticket-internal-comments .ticket-message .user-avatar{
    align-self: center;
}

.ticket-message .user-avatar{
    border-radius: 50%;
}

.ticket-internal-comments .ticket-message .user-avatar{
    min-height: 34px;
    min-width: 34px;
}

.ticket-message-bubble{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 22px;
    min-height: 120px;
    padding: 22px;
}

.ticket-message-bubble strong{
    display: block;
    font-size: 16px;
    margin-bottom: 12px;
}

.ticket-message-bubble time{
    color: rgba(0, 0, 0, 0.46);
    font-size: 12px;
    font-weight: 800;
}

.ticket-message-content{
    line-height: 1.5;
}

.ticket-message-content p:last-child{
    margin-bottom: 10px;
}

.ticket-internal-comments{
    max-height: 380px;
    overflow: auto;
}

.ticket-internal-comments .ticket-message{
    grid-template-columns: 34px minmax(0, 1fr);
}

.ticket-internal-comments .ticket-message img{
    height: 34px;
    width: 34px;
}

.ticket-internal-comments .ticket-message-bubble{
    min-height: 78px;
    padding: 14px;
}

.ticket-internal-comments .ticket-message-bubble strong{
    font-size: 13px;
    margin-bottom: 7px;
}

.ticket-internal-comments .ticket-message-content{
    font-size: 13px;
}

.ticket-side-panel{
    background: rgba(255, 255, 255, 0.58);
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: calc(100vh - 96px);
    padding: 26px;
}

.ticket-side-section h2,
.ticket-side-section .form-label{
    font-size: 18px;
    font-weight: 900;
}

.ticket-side-user{
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 14px;
}

.ticket-side-comment{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    margin-top: auto;
}

.ticket-side-comment input{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    min-height: 58px;
    padding: 0 18px;
}

.ticket-side-comment button{
    background: #f4bf00;
    border: 0;
    color: #ffffff;
}

.ticket-linked-task-list{
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.ticket-linked-task-list .task-row{
    min-height: 82px;
}

.ticket-associate-task-form{
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 18px;
}

.ticket-linked-task{
    align-items: center;
    color: var(--primary);
    display: grid;
    gap: 6px 12px;
    grid-template-columns: 7px minmax(0, 1fr);
    text-decoration: none;
}

.ticket-linked-task span{
    background: var(--task-status-color);
    border-radius: 999px;
    grid-row: span 2;
    height: 100%;
}

.ticket-linked-task small{
    color: rgba(0, 0, 0, 0.52);
    font-weight: 700;
}

.ticket-av{
    height: 25px;
    width: 25px;
}

.user-avatar{
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    line-height: 1;
    vertical-align: middle;
}

.user-avatar--compact{
    border-radius: 50%;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.user-avatar--compact .user-avatar__image,
.user-avatar--compact .user-avatar__initials{
    border-radius: 50%;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    object-fit: cover;
    width: 100%;
}

.user-avatar--compact .user-avatar__initials{
    align-items: center;
    background: var(--primary);
    color: var(--secondary);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-avatar--full .user-avatar__image,
.user-avatar--full .user-avatar__initials{
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    height: var(--user-avatar-size, 40px);
    justify-content: center;
    object-fit: cover;
    width: var(--user-avatar-size, 40px);
}

.user-avatar--full .user-avatar__initials{
    align-items: center;
    background: var(--primary);
    color: var(--secondary);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-avatar__label{
    color: inherit;
    font-size: 14px;
    font-weight: 600;
}

.ticket-user{
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.online-dot{
    background: var(--success);
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.ticket-desc{
    font-size: 14px;
    line-height: 1.25;
}

.ticket-meta{
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.text-bg-danger{
    background-color: var(--dangerbg) !important;
    color: var(--danger) !important;
}

.badge-type{
    background: transparent !important;
    display: block;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    padding: 3px 0 0;
}

.ticket-footer .text-end{
    margin-top: -20px;
}


/* ==================================================
   CALENDARIO
================================================== */

.calendar-panel{
    border-left: 1px solid rgba(0, 0, 0, 0.62);
    padding: 8px 0 6px 30px;
}

.cal-date-header{
    opacity: 0.6;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin: 26px 0 15px;
}

.calendar-title + .cal-date-header{
    margin-top: 0;
}

.cal-event{
    align-items: center;
    color: inherit;
    display: grid;
    gap: 13px;
    grid-template-columns: 43px 3px minmax(0, 1fr);
    min-height: 38px;
    margin-bottom: 13px;
    outline: 0;
    text-decoration: none;
    transition: transform 0.18s ease;
}

.cal-event:hover,
.cal-event:focus{
    color: inherit;
    text-decoration: none;
    transform: translateX(3px);
}

.cal-time{
    align-self: center;
    opacity: 0.6;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.cal-bar{
    align-self: stretch;
    background: var(--primary);
    min-height: 37px;
    width: 3px;
}

.cal-event:hover .cal-bar{
    background: var(--secondary);
}

.cal-event:focus-visible .cal-bar{
    background: var(--secondary);
}

.cal-sub{
    opacity: 0.4;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 5px;
}

.cal-name{
    font-size: 14px;
    font-weight: 800;
    line-height: 1.16;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width:1200px){
    .calendar-panel{
        border-left: 0px;
        padding: 20px  0px;
    }

    .lead-single-grid{
        grid-template-columns: minmax(230px, 0.75fr) minmax(360px, 1.25fr);
    }

    .lead-single-history{
        grid-column: 1 / -1;
    }

    .lead-single-history-list{
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .cliente-single-workspace{
        grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    }

    .cliente-finance-grid{
        grid-template-columns: 1fr;
    }
}

@media(max-width:992px){

    .tasks-shell{
        grid-template-columns: 1fr;
    }

    .tasks-summary-panel{
        position: static;
    }

    .lead-single-grid{
        grid-template-columns: 1fr;
    }

    .cliente-single-workspace{
        grid-template-columns: 1fr;
    }

    .cliente-single-profile{
        width: min(420px, 100%);
    }

    .lead-single-sidebar{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-single-project-card,
    .lead-single-notes-card{
        min-height: auto;
    }

    .lead-single-description{
        min-height: 330px;
    }

    .lead-single-notes{
        min-height: 190px;
    }

}

@media(max-width:768px){

    .task-work-card{
        grid-template-columns: 8px minmax(0, 1fr) 42px;
    }

    .task-work-meta{
        align-items: flex-start;
        grid-column: 2 / -1;
    }

    .task-time-edit-form{
        grid-template-columns: 1fr;
    }

    .tasks-summary-hours,
    .project-file-drop,
    .project-file-upload-actions{
        grid-template-columns: 1fr;
    }

    .project-file-drop-zone{
        height: 150px;
        width: 100%;
    }

    .taskboard-filters form,
    .taskboard-scope{
        grid-template-columns: 1fr;
    }

    .taskboard-filters summary{
        align-items: flex-start;
        flex-direction: column;
    }

    .taskboard-filter-summary{
        justify-content: flex-start;
    }

    .taskboard-scope{
        align-items: stretch;
        flex-direction: column;
    }

    .workspace-header{
        gap: 18px !important;
    }

    .workspace-stats{
        gap: 18px !important;
    }

    .leads-header{
        padding-right: 54px;
    }

    .clientes-header{
        padding-right: 54px;
    }

    .lead-single-header{
        padding-right: 0;
    }

    .cliente-single-header{
        padding-right: 0;
    }

    .lead-single-actions{
        margin-bottom: 18px;
        position: static;
    }

    .cliente-single-actions{
        margin-bottom: 18px;
        position: static;
    }

    .cliente-single-company-card{
        padding: 18px 22px 26px;
    }

    .cliente-single-avatar{
        height: 120px;
        width: 120px;
    }

    .cliente-single-summary{
        margin-left: 90px;
        min-height: 108px;
    }

    .cliente-single-details{
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .cliente-single-notes-card{
        padding: 26px;
    }

    .cliente-single-tabs-panel{
        border-radius: 22px;
        padding: 14px;
    }

    .cliente-single-tabs{
        gap: 6px;
    }

    .cliente-single-tab{
        font-size: 11px;
        min-height: 32px;
        padding: 6px 10px;
    }

    .lead-single-sidebar{
        grid-template-columns: 1fr;
    }

    .lead-single-card{
        border-radius: 20px;
        padding: 18px;
    }

    .lead-single-details div{
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .lead-single-description{
        min-height: 260px;
    }

    .clientes-header h1{
        flex: 0 0 100%;
    }

    .clientes-stats{
        flex: 0 0 100%;
        justify-content: flex-start !important;
    }

    .clientes-table-toolbar{
        align-items: flex-start !important;
        flex-direction: column;
    }

    .clientes-search{
        margin-left: 0;
        width: 100%;
    }

    .clientes-search input{
        flex: 1;
        width: auto;
    }

    .add-button{
        position: absolute;
        right: 0;
        top: 0;
    }

    .lead-form-header{
        align-items: flex-start;
        padding: 16px 16px 6px;
    }

    .lead-form-header .modal-title{
        font-size: 19px;
    }

    .lead-form-body{
        padding: 8px 16px 18px;
    }

    .modal .form-actions{
        flex-direction: column-reverse;
    }

    .modal .form-actions .btn{
        width: 100%;
    }

    .stat-item{
        min-width: 96px;
    }

    .stat-num{
        font-size: 31px;
    }

    .stat-label{
        font-size: 9px;
    }

    .project-card{
        aspect-ratio: auto;
        min-height: 205px;
    }

    .section-heading{
        min-height: auto;
    }

    .task-name,
    .ticket-desc{
        font-size: 13px;
    }

    .tickets-heading .ticket-tab{
        min-width: 92px;
    }

    .main{
        gap: 10px;
        padding: 10px;
    }

    .main-body{
        gap: 10px;
        padding-bottom: 60px;
    }

    .sidebar{
        align-items: center;
        background: transparent;
        bottom: 24px;
        flex-basis: auto;
        flex-direction: row;
        justify-content: center;
        left: 10px;
        min-height: 0;
        padding: 0;
        position: fixed;
        right: 10px;
        width: auto;
    }

    .sidebar-icon{
        height: 36px;
        width: 36px;
    }

    .sidebar-item:hover .sidebar-icon,
    .sidebar-item:focus-within .sidebar-icon,
    .sidebar-item.is-active .sidebar-icon{
        transform: translateY(-2px);
    }

    .sidebar-menu{
        flex-direction: row;
        gap: 12px;
        margin-block: 0;
    }

    .sidebar-settings{
        margin-left: 12px;
    }

    .calendar-panel{
        min-height: auto;
        padding: 24px 0 24px 20px;
    }

    .calendar-title{
        font-size: 28px;
    }

    .sidebar-submenu{
        bottom: calc(100% + 12px);
        left: 50%;
        top: auto;
        transform: translate(-50%, 8px);
    }

    .sidebar-submenu::before{
        bottom: -14px;
        height: 14px;
        left: 0;
        top: auto;
        width: 100%;
    }

    .sidebar-item:hover .sidebar-submenu,
    .sidebar-item:focus-within .sidebar-submenu,
    .sidebar-item.is-active .sidebar-submenu{
        transform: translate(-50%, 0);
    }

    .sidebar-submenu-bottom{
        bottom: calc(100% + 12px);
        transform: translate(-50%, 8px);
    }

    .sidebar-item:hover .sidebar-submenu-bottom,
    .sidebar-item:focus-within .sidebar-submenu-bottom,
    .sidebar-item.is-active .sidebar-submenu-bottom{
        transform: translate(-50%, 0);
    }
}

@media (max-width: 1199px){
    .ticket-single-page{
        grid-template-columns: 1fr;
        margin-right: 0;
    }

    .ticket-single-main{
        border-right: 0;
    }

.ticket-side-panel{
    min-height: auto;
}
}


/* ==================================================
   SETTINGS
================================================== */

.settings-page{
    padding-bottom: 34px;
}

.settings-intro{
    color: rgba(0, 0, 0, 0.62);
    font-size: 13px;
    font-weight: 600;
}

.settings-shell{
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
}

.settings-nav{
    align-content: start;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 20px;
    display: grid;
    gap: 6px;
    padding: 10px;
    position: sticky;
    top: 112px;
}

.settings-nav-link,
.settings-tab{
    display: block;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 36px;
    padding: 8px 12px;
    text-align: left;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.settings-nav-link:hover,
.settings-nav-link:focus,
.settings-nav-link.is-active,
.settings-tab:hover,
.settings-tab:focus,
.settings-tab.is-active{
    background: var(--primary);
    border-color: var(--primary);
    color: var(--secondary);
}

.settings-content{
    min-width: 0;
}

.settings-panel{
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.64);
    border-radius: 22px;
    display: none;
    padding: 22px;
}

.settings-panel.shape-card{
    background: transparent;
    border: 0;
    padding: 22px;
}

.settings-panel.shape-card:hover,
.settings-panel.shape-card:focus,
.settings-panel.shape-card:focus-within{
    transform: none;
}

.settings-panel.is-active{
    display: block;
}

.settings-panel .card-actions{
    right: 0;
    top: 0;
}

.settings-panel-heading{
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-right: 54px;
}

.settings-panel-heading h2{
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
}

.settings-grid{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-field{
    min-width: 0;
}

.settings-field-full{
    grid-column: 1 / -1;
}

.settings-field-action{
    align-items: flex-end;
    display: flex;
}

.settings-field-action .btn{
    width: 100%;
}

.settings-field input[type="color"]{
    appearance: none;
    border: 0;
    border-radius: 12px;
    height: 35px;
    min-height: 35px;
    padding: 0;
    width: 62px;
    cursor: pointer;
}

.settings-field input[type="color"]::-webkit-color-swatch-wrapper{
    padding: 0;
}

.settings-field input[type="color"]::-webkit-color-swatch{
    border: 0;
    border-radius: 0;
}

.settings-field input[type="color"]::-moz-color-swatch{
    border: 0;
    border-radius: 0;
}

.settings-subsection{
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 22px;
    padding-top: 20px;
}

.settings-subsection:first-of-type{
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.settings-subsection h3,
.settings-repeat-heading h3{
    font-size: 15px;
    margin: 0;
}

.settings-large-textarea{
    min-height: 220px;
}

.settings-inline-form{
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.settings-repeater{
    display: grid;
    gap: 14px;
}

.settings-repeat-item{
    border-radius: 28px;
    padding: 24px 16px 18px;
    position: relative;
}

.settings-repeat-item.shape-card{
    background: transparent;
    border: 0;
    padding: 24px 16px 18px;
}

.settings-repeat-item.shape-card:hover,
.settings-repeat-item.shape-card:focus,
.settings-repeat-item.shape-card:focus-within{
    transform: none;
}

.settings-repeat-heading{
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
    min-height: 42px;
    padding-right: 96px;
}

.settings-repeat-line{
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
}

.settings-repeat-line .settings-field{
    width: 100%;
}

.settings-compact-repeater{
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.settings-three-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-three-grid .settings-repeat-line{
    grid-template-columns: minmax(0, 1fr) auto;
}

.settings-two-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-lead-status-grid{
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.settings-quote-category-line{
    grid-template-columns: minmax(0, 1fr) minmax(90px, 120px);
}

.settings-repeat-item .settings-remove-btn{
    position: absolute;
    right: 0;
    top: 0;
}

.settings-repeat-actions .settings-remove-btn{
    position: static;
}

.settings-repeat-actions .card-icon{
    flex: 0 0 45px;
    width: 45px;
}

.settings-repeat-actions .settings-department-save-btn{
    color: var(--primary);
}

.settings-repeat-line .settings-remove-btn{
    align-self: start;
    justify-self: end;
}

.settings-repeat-line.settings-repeat-item{
    /*padding-top: 58px;*/
}

.settings-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

.settings-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.settings-tab{
    text-align: center;
}

.settings-subpanel{
    display: none;
}

.settings-subpanel.is-active{
    display: block;
}

.settings-warning{
    background: rgba(255, 45, 85, 0.13);
    border: 1px solid rgba(255, 45, 85, 0.28);
    border-radius: 16px;
    color: #7d1028;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.settings-file-field{
    position: relative;
    display: grid;
    gap: 7px;
}

.settings-file-upload{
    display: block;
    position: relative;
}

.settings-file-upload input[type="file"]{
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.settings-file-upload .project-file-drop{
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.24);
    min-height: 145px;
}

.settings-file-upload .project-file-drop-zone{
    height: 76px;
}

.settings-file-upload .project-file-drop-zone img{
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.settings-file-pdf-preview{
    background: #fff;
    border: 0;
    height: 100%;
    min-height: 0;
    pointer-events: none;
    width: 100%;
}

.settings-file-upload .project-file-drop small{
    color: rgba(0, 0, 0, 0.52);
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: center;
}

.settings-file-upload.has-new-file .project-file-drop{
    border-color: var(--primary);
}

.settings-file-current{
    color: rgba(0, 0, 0, 0.62);
    font-size: 11px;
    font-weight: 800;
    position: absolute;
    right: 0;
}

.settings-file-current:hover,
.settings-file-current:focus{
    color: var(--primary);
}

.settings-current-files{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.settings-pdf-grid{
    grid-template-columns: 1fr;
}

.settings-pdf-main-files,
.settings-pdf-font-grid{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-pdf-main-files .settings-file-upload .project-file-drop,
.settings-pdf-internal-upload .settings-file-upload .project-file-drop{
    aspect-ratio: 3 / 4;
    max-width: 220px;
}

.settings-pdf-internal-row{
    border: 1px solid rgba(255, 122, 0, 0.72);
    border-radius: 10px;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(180px, 240px) 1fr;
    min-height: 260px;
    padding: 18px;
}

.settings-pdf-internal-current{
    align-content: start;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.settings-pdf-current-card{
    color: var(--secondary);
    display: grid;
    gap: 8px;
    min-width: 0;
    position: relative;
}

.settings-pdf-current-link{
    color: inherit;
    display: grid;
    gap: 8px;
    text-decoration: none;
}

.settings-pdf-remove-btn{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.settings-pdf-current-preview{
    align-items: center;
    aspect-ratio: 3 / 4;
    background: rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.settings-pdf-current-card strong,
.settings-pdf-current-card small{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-pdf-current-card small,
.settings-pdf-section-title small{
    color: rgba(0, 0, 0, 0.48);
    font-size: 12px;
    font-weight: 800;
}

.settings-pdf-fonts{
    display: grid;
    gap: 18px;
}

.settings-pdf-section-title h3{
    font-size: 17px;
    margin: 0 0 4px;
}

.settings-pdf-font-grid .settings-file-upload .project-file-drop{
    aspect-ratio: 5 / 2;
    min-height: 86px;
}

.quotes-filters{
    grid-template-columns: 2fr repeat(5, minmax(150px, 1fr)) auto;
}

.quote-status-select{
    background-color: #fff;
    border-radius: 999px;
    color: var(--secondary);
    font-weight: 800;
    min-width: 220px;
    padding-inline: 16px 34px;
}

.quote-user-badge{
    align-items: center;
    background: var(--primary);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    margin-right: 8px;
    width: 34px;
}

.quote-modal .modal-dialog{
    max-width: min(1460px, calc(100vw - 48px));
}

.quote-form{
    display: grid;
    gap: 26px;
}

.quote-form-section,
.quote-add-group-panel,
.quote-element-group,
.quote-client-panel,
.quote-status-panel{
    background: #fff;
    border: 1px solid rgba(8, 40, 74, 0.10);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(8, 40, 74, 0.08);
}

.quote-form-section h2,
.quote-add-group-panel h2{
    border-bottom: 1px solid rgba(8, 40, 74, 0.10);
    font-size: 24px;
    margin: 0;
    padding: 22px 28px;
}

.quote-form-card-body{
    display: grid;
    gap: 24px;
    padding: 24px 28px 30px;
}

.quote-form-tabs{
    align-items: center;
    display: flex;
    gap: 42px;
}

.quote-form-tabs a{
    color: #0878ff;
    font-weight: 800;
    text-decoration: none;
}

.quote-form-grid{
    display: grid;
    gap: 24px;
}

.quote-form-grid-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-form-grid-3{
    grid-template-columns: 1fr repeat(2, minmax(220px, 1fr));
}

.quote-form-grid-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-form fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}

.quote-form legend,
.quote-checkbox span{
    color: var(--secondary);
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 10px;
}

.quote-form fieldset label{
    margin-right: 16px;
}

.quote-checkbox{
    align-items: center;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.quote-rich-text{
    min-height: 220px;
}

.quote-section-title{
    font-size: 28px;
    margin: 8px 0 16px;
}

.quote-groups{
    display: grid;
    gap: 28px;
}

.quote-group-card{
    background: #fff;
    box-shadow: 0 10px 30px rgba(8, 40, 74, 0.08);
    padding: 32px;
}

.quote-group-header{
    align-items: center;
    border-bottom: 1px solid rgba(8, 40, 74, 0.10);
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.quote-group-header h3{
    font-size: 32px;
    margin: 0;
}

.quote-items{
    display: grid;
    gap: 18px;
}

.quote-item-row{
    align-items: start;
    display: grid;
    gap: 10px 12px;
    grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr) 120px 150px 150px 42px;
}

.quote-item-description{
    grid-column: 1 / -1;
    min-height: 76px;
}

.quote-item-optional{
    color: var(--primary);
    font-weight: 900;
}

.quote-icon-button{
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--secondary);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.quote-add-item{
    justify-self: end;
    margin-top: 18px;
    min-width: 150px;
}

.quote-add-group-panel{
    padding-bottom: 24px;
}

.quote-add-group-controls{
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr auto;
    padding: 24px 28px 0;
}

.quote-submit-row{
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: flex-end;
}

.quote-submit-status{
    max-width: 280px;
}

.quote-header-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.quote-header-actions .btn{
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.quote-show-layout{
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.quote-client-panel{
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 24px;
    padding: 34px;
}

.quote-client-panel h2{
    font-size: 28px;
    margin: 0 0 8px;
}

.quote-client-panel a{
    color: var(--primary);
    display: block;
    font-weight: 900;
    text-decoration: none;
}

.quote-client-panel dl{
    border-left: 2px dashed rgba(8, 40, 74, 0.2);
    display: grid;
    gap: 12px;
    grid-template-columns: 150px 1fr;
    margin: 0;
    padding-left: 34px;
}

.quote-client-panel dt{
    color: rgba(0, 0, 0, 0.55);
    font-weight: 900;
}

.quote-client-panel dd{
    color: var(--primary);
    font-weight: 900;
    margin: 0;
}

.quote-metrics{
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quote-metrics article{
    align-items: center;
    background: #fff;
    border: 1px solid rgba(8, 40, 74, 0.10);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 24px;
    text-align: right;
}

.quote-metrics span{
    color: var(--primary);
    font-size: 32px;
    justify-self: start;
}

.quote-metrics strong{
    font-size: 22px;
}

.quote-metrics small{
    font-size: 16px;
    font-weight: 800;
}

.quote-status-panel{
    align-self: start;
    display: grid;
    gap: 22px;
    justify-items: center;
    min-height: 420px;
    padding: 48px 28px;
    text-align: center;
}

.quote-status-panel h2,
.quote-status-panel h3{
    font-size: 28px;
    margin: 0;
}

.quote-probability-label{
    border: 1px solid rgba(8, 40, 74, 0.12);
    border-radius: 999px;
    padding: 10px 18px;
}

.quote-elements-view{
    display: grid;
    gap: 24px;
}

.quote-element-group{
    padding: 32px;
}

.quote-element-group h3{
    font-size: 32px;
    margin: 0 0 26px;
}

.quote-position-pill{
    background: #050505;
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    padding: 10px 16px;
}

.quote-quantity{
    color: var(--secondary);
    display: inline-block;
    font-weight: 900;
    margin-left: 8px;
}

@media (max-width: 992px){
    .settings-shell{
        grid-template-columns: 1fr;
    }

    .settings-nav{
        display: flex;
        overflow-x: auto;
        position: static;
    }

    .settings-nav-link{
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .settings-pdf-main-files,
    .settings-pdf-font-grid{
        grid-template-columns: 1fr;
    }

    .settings-pdf-internal-row{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px){
    .settings-grid,
    .settings-inline-form,
    .settings-repeat-line{
        grid-template-columns: 1fr;
    }

    .settings-panel{
        padding: 18px;
    }

    .settings-repeat-heading,
    .settings-actions{
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-remove-btn,
    .settings-actions .btn{
        width: 100%;
    }
}

@media (max-width: 1100px){
    .settings-three-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .settings-three-grid,
    .settings-two-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px){
    .tickets-stats-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tickets-filters{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-notes-filters,
    .retainers-filters,
    .quotes-filters,
    .payment-note-grid,
    .payment-note-options,
    .payment-line-top,
    .payment-line-bottom{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-form-grid-3,
    .quote-form-grid-4,
    .quote-show-layout,
    .quote-client-panel{
        grid-template-columns: 1fr;
    }

    .quote-metrics{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-item-row{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-item-row .quote-icon-button{
        justify-self: start;
    }

    .payment-tax-toggle{
        margin-bottom: 0;
    }
}

@media (max-width: 576px){
    .tickets-stats-grid,
    .tickets-filters,
    .payment-notes-filters,
    .retainers-filters,
    .quotes-filters,
    .payment-note-grid,
    .payment-note-options,
    .payment-line-top,
    .payment-line-bottom,
    .ticket-associate-task-form{
        grid-template-columns: 1fr;
    }

    .payment-export-actions{
        justify-content: flex-start;
        margin-top: 0;
    }

    .payment-note-line{
        grid-template-columns: 1fr;
    }

    .payment-line-number{
        padding-top: 0;
    }

    .payment-note-modal .modal-dialog{
        max-width: calc(100vw - 16px);
    }

    .payment-note-form h2{
        font-size: 22px;
    }

    .quote-form-grid-2,
    .quote-form-grid-3,
    .quote-form-grid-4,
    .quote-add-group-controls,
    .quote-item-row,
    .quote-client-panel dl,
    .quote-metrics{
        grid-template-columns: 1fr;
    }

    .quote-group-card,
    .quote-element-group,
    .quote-client-panel,
    .quote-form-card-body{
        padding: 18px;
    }

    .quote-form-section h2,
    .quote-add-group-panel h2{
        padding: 18px;
    }

    .quote-group-header h3,
    .quote-element-group h3{
        font-size: 24px;
    }

    .quote-submit-row,
    .quote-header-actions:not(.page-header-actions){
        align-items: stretch;
        flex-direction: column;
    }

    .quote-submit-status,
    .quote-submit-row .btn,
    .quote-header-actions:not(.page-header-actions) .btn{
        max-width: none;
        width: 100%;
    }

    .ticket-reply-head,
    .ticket-reply-actions,
    .ticket-section-title{
        align-items: flex-start;
        flex-direction: column;
    }

    .ticket-single-main,
    .ticket-side-panel{
        padding: 16px;
    }

    .lead-form-modal .modal-dialog{
        margin: 8px;
        max-width: calc(100vw - 16px);
    }

    .lead-form-content{
        border-radius: 22px;
    }

    .lead-editor{
        border-radius: 18px;
    }

    .clientes-page{
        margin-top: 24px !important;
    }

    .clientes-table{
        min-width: 760px;
    }

    .clientes-table th,
    .clientes-table td{
        padding: 14px 18px;
    }

    .cliente-form-modal .modal-dialog{
        max-width: calc(100vw - 16px);
    }

    .cliente-form-header{
        padding: 20px 20px 6px;
    }

    .cliente-form-body{
        padding: 10px 20px 24px;
    }

    .cliente-form-layout{
        grid-template-columns: 1fr;
    }

    .cliente-avatar-field{
        justify-self: center;
    }

    .clientes-pagination{
        float: none;
    }

    .sidebar-icon{
        height: 34px;
        width: 34px;
    }

    .sidebar-menu{
        gap: 8px;
    }

    .sidebar-settings{
        margin-left: 8px;
    }

    .topbar-search-panel{
        left: 50%;
        right: auto;
        transform: translate(calc(-50vw + 4px), 0);
    }

    .topbar-search.is-open .topbar-search-panel{
        transform: translate(calc(-50vw + 4px), 0);
    }

    .topbar-notifications-panel{
        left: 50%;
        right: auto;
        transform: translate(calc(-50vw - 60px), 0);
    }

    .topbar-notifications.is-open .topbar-notifications-panel{
        transform: translate(calc(-50vw - 60px), 0);
    }
}

/* ==================================================
   ACCOUNT
================================================== */

.account-page{
    color: var(--primary);
    padding-bottom: 42px;
}

.account-layout{
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
}

.account-card{
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 26px;
    box-shadow: 0 16px 40px rgba(26, 27, 31, .04);
    overflow: hidden;
}

.account-card-heading{
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 24px 26px 0;
}

.account-card-heading h2{
    font-size: 22px;
    line-height: 1.2;
    margin: 3px 0 0;
}

.account-eyebrow{
    color: rgba(0, 0, 0, .48);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.account-save-icon,
.account-session-remove{
    background: var(--primary);
    color: var(--secondary);
    flex: 0 0 auto;
}

.account-save-icon:hover,
.account-save-icon:focus,
.account-session-remove:hover,
.account-session-remove:focus{
    background: var(--secondary);
    color: var(--primary);
}

.account-profile-content{
    align-items: start;
    display: grid;
    gap: 30px;
    grid-template-columns: 130px minmax(0, 1fr);
    padding: 28px 26px 26px;
}

.account-avatar-field{
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-avatar-preview{
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    padding: 0;
    position: relative;
}

.account-avatar-preview .user-avatar{
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

.account-avatar-edit{
    align-items: center;
    background: var(--primary);
    border: 4px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    bottom: 0;
    color: var(--secondary);
    display: flex;
    height: 34px;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 34px;
}

.account-avatar-edit .kb-icon{
    height: 14px;
    width: 14px;
}

.account-avatar-help{
    color: rgba(0, 0, 0, .48);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.account-profile-fields{
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-field{
    display: grid;
    gap: 7px;
    min-width: 0;
}

.account-field > span:first-child,
.account-readonly-detail span{
    color: rgba(0, 0, 0, .55);
    font-size: 11px;
    font-weight: 800;
}

.account-field-full{
    grid-column: 1 / -1;
}

.account-readonly-detail{
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: grid;
    gap: 4px;
    padding-top: 14px;
}

.account-readonly-detail strong{
    font-size: 12px;
}

.account-card-footer{
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    justify-content: flex-end;
    padding: 18px 26px;
}

.account-card-footer .btn{
    min-width: 180px;
}

.account-heading-icon{
    align-items: center;
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.account-heading-icon .kb-icon{
    height: 18px;
    width: 18px;
}

.account-password-fields{
    display: grid;
    gap: 16px;
    padding: 28px 26px 24px;
}

.account-password-control{
    display: block;
    position: relative;
}

.account-password-control input{
    padding-right: 58px;
    width: 100%;
}

.account-password-control button{
    background: transparent;
    border: 0;
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    padding: 8px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.account-password-note{
    color: rgba(0, 0, 0, .5);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.55;
    margin: 2px 0 0;
}

.account-sessions-card{
    margin-top: 18px;
}

.account-sessions-heading{
    align-items: center;
    padding-bottom: 22px;
}

.account-sessions-heading p{
    color: rgba(0, 0, 0, .52);
    font-size: 11px;
    font-weight: 650;
    margin: 6px 0 0;
}

.account-session-list{
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.account-session{
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 44px minmax(0, 1fr) 42px;
    min-height: 92px;
    padding: 18px 26px;
}

.account-session + .account-session{
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.account-session.is-current{
    background: rgba(255, 255, 255, .32);
}

.account-session-device-icon,
.account-session-shield{
    align-items: center;
    background: rgba(0, 0, 0, .055);
    border-radius: 14px;
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.account-session-device-icon .kb-icon,
.account-session-shield .kb-icon{
    height: 18px;
    width: 18px;
}

.account-session-title{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.account-session-title strong{
    font-size: 13px;
}

.account-session-title span{
    background: var(--primary);
    border-radius: 999px;
    color: var(--secondary);
    font-size: 8px;
    font-weight: 900;
    padding: 4px 8px;
    text-transform: uppercase;
}

.account-session-meta{
    color: rgba(0, 0, 0, .52);
    display: flex;
    flex-wrap: wrap;
    font-size: 9px;
    font-weight: 700;
    gap: 8px 18px;
    margin-top: 8px;
}

.account-session-meta span{
    align-items: center;
    display: flex;
    gap: 5px;
}

.account-session-meta .kb-icon{
    height: 11px;
    width: 11px;
}

.account-session form{
    margin: 0;
}

@media (max-width: 1100px){
    .account-layout{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px){
    .account-profile-content{
        grid-template-columns: 1fr;
    }

    .account-profile-fields{
        grid-template-columns: 1fr;
    }

    .account-field-full{
        grid-column: auto;
    }

    .account-session{
        align-items: start;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        padding: 18px;
    }

    .account-session-device-icon,
    .account-session-shield{
        border-radius: 12px;
        height: 38px;
        width: 38px;
    }

    .account-sessions-heading{
        align-items: flex-start;
        flex-direction: column;
    }

    .account-card-footer .btn,
    .account-sessions-heading form,
    .account-sessions-heading .btn{
        width: 100%;
    }
}
/* Calendar agenda */
.calendar-header-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.calendar-header-actions .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.calendar-header-actions .kb-icon{
    width:18px;
    height:18px;
}

.calendar-workspace{
    display:grid;
    grid-template-columns:minmax(230px, 290px) minmax(0, 1fr);
    gap:24px;
    align-items:start;
    padding-bottom:32px;
}

.calendar-sources-panel,
.calendar-agenda-panel{
    background:rgba(255, 255, 255, .96);
    border:0;
    box-shadow:0 16px 45px rgba(16, 24, 40, .08);
}

.calendar-sources-panel{
    padding:24px;
    position:sticky;
    top:20px;
}

.calendar-sources-heading h2{
    font-size:20px;
    margin:3px 0 14px;
}

.calendar-eyebrow{
    color:var(--primary);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.calendar-sources-panel > p,
.calendar-source-note{
    color:#697386;
    font-size:13px;
    line-height:1.55;
}

.calendar-source-form{
    display:grid;
    gap:8px;
    margin:22px 0;
}

.calendar-source-form .form-label{
    font-size:12px;
    font-weight:650;
    margin:5px 0 0;
}

.calendar-source-color-row{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:14px;
    margin-top:8px;
}

.calendar-source-color-row .btn{
    min-width:110px;
}

.calendar-source-list{
    display:grid;
    gap:8px;
    margin:4px 0 18px;
}

.calendar-source-item{
    display:grid;
    grid-template-columns:10px minmax(0, 1fr) 28px;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:7px 8px 7px 12px;
    background:#f7f8fa;
    border-radius:12px;
}

.calendar-source-dot{
    width:9px;
    height:9px;
    border-radius:50%;
}

.calendar-source-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:600;
}

.calendar-source-remove{
    border:0;
    background:transparent;
    color:#8b95a7;
    border-radius:50%;
    font-size:22px;
    line-height:1;
}

.calendar-source-remove:hover{
    background:#fff;
    color:#d92d20;
}

.calendar-agenda-panel{
    min-width:0;
    padding:24px;
}

.calendar-agenda-panel .fc{
    --fc-border-color:#e8ebf0;
    --fc-button-bg-color:#111;
    --fc-button-border-color:#111;
    --fc-button-hover-bg-color:var(--primary);
    --fc-button-hover-border-color:var(--primary);
    --fc-button-active-bg-color:var(--primary);
    --fc-button-active-border-color:var(--primary);
    --fc-today-bg-color:rgba(255, 196, 0, .1);
    color:#202938;
}

.calendar-agenda-panel .fc .fc-toolbar{
    gap:16px;
    margin-bottom:24px;
}

.calendar-agenda-panel .fc .fc-toolbar-title{
    font-size:22px;
    font-weight:700;
}

.calendar-agenda-panel .fc .fc-button{
    border-radius:999px;
    box-shadow:none;
    font-size:13px;
    padding:.48em .85em;
}

.calendar-agenda-panel .fc .fc-col-header-cell-cushion,
.calendar-agenda-panel .fc .fc-daygrid-day-number{
    color:inherit;
    text-decoration:none;
}

.calendar-agenda-panel .fc .fc-event{
    border-radius:7px;
    cursor:pointer;
    padding:2px 4px;
}

.calendar-agenda-panel .fc .calendar-external-event{
    border-style:dashed;
    opacity:.82;
}

.calendar-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.calendar-form-wide{
    grid-column:1 / -1;
}

.calendar-event-footer .btn-danger{
    color:#fff;
}

.calendar-subscription-control{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
    margin-bottom:14px;
}

.calendar-subscription-control .form-control{
    font-size:12px;
}

@media (max-width:991.98px){
    .calendar-workspace{
        grid-template-columns:1fr;
    }

    .calendar-sources-panel{
        position:static;
    }
}

@media (max-width:767.98px){
    .calendar-agenda-panel,
    .calendar-sources-panel{
        padding:18px;
    }

    .calendar-agenda-panel .fc .fc-toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .calendar-agenda-panel .fc .fc-toolbar-chunk:nth-child(2){
        order:-1;
    }

    .calendar-form-grid{
        grid-template-columns:1fr;
    }

    .calendar-form-wide{
        grid-column:auto;
    }

    .calendar-subscription-control{
        grid-template-columns:1fr;
    }
}