/* ==========================================================
   Francherry Manager Portal
   Employees Module
   Version: 1.0.0

   Visual system aligned with Bookings / Services
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

.fb-employees-wrapper {

    width: 100%;

    margin: 0;

    padding: 34px 28px 42px;

    box-sizing: border-box;

    background: #F6F7F8;

    color: #171717;

}


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

.fb-employees-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 34px;

}


.fb-employees-header-left {

    min-width: 0;

}


.fb-employees-title {

    margin: 0 0 7px !important;

    padding: 0 !important;

    color: #171717 !important;

    font-family: inherit !important;

    font-size: 32px !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

}


.fb-employees-subtitle {

    margin: 0 !important;

    padding: 0 !important;

    color: #737373 !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

}


/* ==========================================================
   TOTAL EMPLOYEES
========================================================== */

.fb-employees-header-count {

    width: 145px;

    min-width: 145px;

    min-height: 82px;

    padding: 13px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E1E1E1;

    border-radius: 14px;

}


.fb-employees-count-label {

    display: block;

    margin-bottom: 6px;

    color: #777777;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: .04em;

}


.fb-employees-count {

    color: #171717;

    font-size: 23px;

    font-weight: 700;

    line-height: 1;

}


/* ==========================================================
   TOOLBAR
========================================================== */

.fb-employees-toolbar {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 24px;

}


.fb-employees-search {

    position: relative;

    flex: 1 1 auto;

    min-width: 0;

}


.fb-employees-search > i {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: #999999;

    font-size: 14px;

    pointer-events: none;

}


/* ==========================================================
   SEARCH
========================================================== */

body .fb-employees-wrapper #fb-employee-search {

    width: 100% !important;

    height: 54px !important;

    margin: 0 !important;

    padding: 0 18px 0 48px !important;

    box-sizing: border-box !important;

    background: #FFFFFF !important;

    color: #171717 !important;

    border: 1px solid #DDDDDD !important;

    border-radius: 14px !important;

    outline: none !important;

    box-shadow: none !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 400 !important;

}


body .fb-employees-wrapper #fb-employee-search::placeholder {

    color: #A0A0A0 !important;

}


body .fb-employees-wrapper #fb-employee-search:focus {

    border-color: #C89B3C !important;

    box-shadow:
        0 0 0 3px
        rgba(200, 155, 60, .12) !important;

}


/* ==========================================================
   NEW EMPLOYEE BUTTON
========================================================== */

body .fb-employees-wrapper #fb-new-employee {

    width: 165px !important;

    min-width: 165px !important;

    height: 54px !important;

    margin: 0 !important;

    padding: 0 22px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    box-sizing: border-box !important;

    background: #C89B3C !important;

    color: #111111 !important;

    border: 1px solid #111111 !important;

    border-radius: 14px !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;

}


body .fb-employees-wrapper #fb-new-employee span,
body .fb-employees-wrapper #fb-new-employee i {

    color: #111111 !important;

}


body .fb-employees-wrapper #fb-new-employee:hover {

    background: #D2A744 !important;

}


/* ==========================================================
   RESULTS META
========================================================== */

.fb-employees-results-meta {

    display: flex;

    align-items: center;

    gap: 4px;

    min-height: 18px;

    margin: 10px 0 27px;

    color: #818181;

    font-family: inherit;

    font-size: 12px;

    line-height: 1.4;

}


.fb-employees-results-meta strong {

    color: #555555;

    font-weight: 600;

}


/* ==========================================================
   EMPLOYEES LIST
========================================================== */

.fb-employees-list {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* ==========================================================
   EMPLOYEE CARD
========================================================== */

.fb-employee-card {

    width: 100%;

    min-height: 126px;

    margin: 0;

    padding: 22px 24px;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.6fr)
        minmax(300px, 1.3fr)
        auto;

    align-items: center;

    gap: 22px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E1E1E1;

    border-radius: 18px;

    box-shadow:
        0 5px 15px rgba(
            0,
            0,
            0,
            .025
        );

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

}


.fb-employee-card:hover {

    border-color: #D8C08B;

    box-shadow:
        0 8px 22px rgba(
            0,
            0,
            0,
            .045
        );

    transform: translateY(-1px);

}


/* ==========================================================
   IDENTITY
========================================================== */

.fb-employee-card-identity {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 15px;

}


.fb-employee-avatar {

    width: 52px;

    height: 52px;

    min-width: 52px;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: #C89B3C;

    color: #FFFFFF;

    border-radius: 50%;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .01em;

}


.fb-employee-card-info {

    min-width: 0;

}


.fb-employee-name {

    margin: 0 0 7px !important;

    padding: 0 !important;

    overflow: hidden;

    color: #111111 !important;

    font-family: inherit !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ==========================================================
   CONTACT
========================================================== */

.fb-employee-contact {

    display: flex;

    flex-wrap: wrap;

    gap: 6px 14px;

    margin: 0;

}


.fb-employee-contact span {

    min-width: 0;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #737373;

    font-size: 12px;

    line-height: 1.4;

}


.fb-employee-contact i {

    flex: 0 0 auto;

    color: #777777;

    font-size: 11px;

}


/* ==========================================================
   STATS
========================================================== */

.fb-employee-card-stats {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(85px, 1fr));

    gap: 10px;

}


.fb-employee-stat {

    min-width: 0;

    padding-left: 13px;

    border-left: 1px solid #ECECEC;

}


.fb-employee-stat span {

    display: block;

    margin-bottom: 5px;

    color: #888888;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: .04em;

}


.fb-employee-stat strong {

    display: block;

    overflow: hidden;

    color: #171717;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ==========================================================
   STATUS
========================================================== */

.fb-employee-status {

    display: inline-flex !important;

    align-items: center;

    gap: 5px;

    width: fit-content;

}


.fb-employee-status::before {

    content: "";

    width: 6px;

    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: currentColor;

}


.fb-employee-status.active {

    color: #198754 !important;

}


.fb-employee-status.hidden {

    color: #888888 !important;

}


/* ==========================================================
   VIEW EMPLOYEE BUTTON
========================================================== */

.fb-employee-card-action {

    display: flex;

    align-items: center;

    justify-content: flex-end;

}


body .fb-employees-wrapper
button.fb-employee-view {

    min-width: 135px !important;

    height: 43px !important;

    min-height: 43px !important;

    margin: 0 !important;

    padding: 0 17px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    background: #000000 !important;

    color: #FFFFFF !important;

    border: 1px solid #000000 !important;

    border-radius: 5px !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    box-shadow: none !important;

    cursor: pointer !important;

}


body .fb-employees-wrapper
button.fb-employee-view span,
body .fb-employees-wrapper
button.fb-employee-view i {

    color: #FFFFFF !important;

}


body .fb-employees-wrapper
button.fb-employee-view:hover,
body .fb-employees-wrapper
button.fb-employee-view.active {

    background: #C89B3C !important;

    color: #111111 !important;

    border-color: #C89B3C !important;

}


body .fb-employees-wrapper
button.fb-employee-view:hover span,
body .fb-employees-wrapper
button.fb-employee-view:hover i,
body .fb-employees-wrapper
button.fb-employee-view.active span,
body .fb-employees-wrapper
button.fb-employee-view.active i {

    color: #111111 !important;

}


/* ==========================================================
   INLINE DETAILS
========================================================== */

.fb-employee-details-inline {

    position: relative;

    margin-top: -12px;

    margin-bottom: 6px;

    padding: 22px;

    box-sizing: border-box;

    background: #FAFAFA;

    border: 1px solid #E1E1E1;

    border-top: none;

    border-radius: 0 0 18px 18px;

}


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

body .fb-employee-details-inline
button.fb-employee-inline-close {

    position: absolute;

    top: 14px;

    right: 14px;

    width: 32px !important;

    height: 32px !important;

    min-width: 32px !important;

    min-height: 32px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #000000 !important;

    color: #C89B3C !important;

    border: 1px solid #000000 !important;

    border-radius: 6px !important;

    font-size: 12px !important;

    line-height: 1 !important;

    cursor: pointer !important;

}


body .fb-employee-details-inline
button.fb-employee-inline-close i {

    color: #C89B3C !important;

}


body .fb-employee-details-inline
button.fb-employee-inline-close:hover {

    background: #C89B3C !important;

    color: #000000 !important;

    border-color: #C89B3C !important;

}


body .fb-employee-details-inline
button.fb-employee-inline-close:hover i {

    color: #000000 !important;

}


/* ==========================================================
   INLINE LOADING / ERROR
========================================================== */

.fb-employee-inline-loading,
.fb-employee-inline-error {

    min-height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #666666;

    font-size: 12px;

}


.fb-employee-inline-loading i {

    color: #C89B3C;

}


.fb-employee-inline-error {

    color: #B42318;

}


.fb-employee-inline-error i {

    color: #B42318;

}


/* ==========================================================
   INLINE INFORMATION GRID
========================================================== */

.fb-employee-inline-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 20px;

    padding-right: 42px;

}


.fb-employee-inline-info {

    min-width: 0;

    padding: 12px 13px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E5E5E5;

    border-radius: 8px;

}


.fb-employee-inline-info label {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 5px;

    color: #888888;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: .03em;

}


.fb-employee-inline-info label i {

    color: #777777;

    font-size: 10px;

}


.fb-employee-inline-info strong {

    display: block;

    overflow: hidden;

    color: #171717;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.4;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ==========================================================
   INLINE SECTIONS
========================================================== */

.fb-employee-inline-section {

    margin-bottom: 18px;

}


.fb-employee-inline-section-title {

    margin-bottom: 8px;

    color: #171717;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: .04em;

}


.fb-employee-bookings-list {

    display: grid;

    gap: 7px;

}


/* ==========================================================
   APPOINTMENT ITEMS
========================================================== */

.fb-employee-booking-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 11px 13px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E5E5E5;

    border-radius: 8px;

}


.fb-employee-booking-item.upcoming {

    border-left: 3px solid #C89B3C;

}


.fb-employee-booking-main {

    min-width: 0;

}


.fb-employee-booking-main strong {

    display: block;

    margin-bottom: 3px;

    color: #171717;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.35;

}


.fb-employee-booking-main span {

    color: #777777;

    font-size: 10px;

    line-height: 1.4;

}


.fb-employee-booking-status {

    flex: 0 0 auto;

    padding: 5px 7px;

    background: #F4F4F4;

    color: #555555;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

}


/* ==========================================================
   EMPTY APPOINTMENTS
========================================================== */

.fb-employee-booking-empty {

    padding: 12px;

    background: #FFFFFF;

    border: 1px dashed #DCDCDC;

    border-radius: 8px;

    color: #888888;

    font-size: 11px;

    text-align: center;

}


/* ==========================================================
   INLINE ACTIONS
========================================================== */

.fb-employee-inline-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 15px;

    border-top: 1px solid #E5E5E5;

}


body .fb-employee-details-inline
button.fb-employee-inline-action {

    min-height: 40px !important;

    padding: 0 15px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px !important;

    background: #000000 !important;

    color: #C89B3C !important;

    border: 1px solid #000000 !important;

    border-radius: 6px !important;

    font-family: inherit !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    cursor: pointer !important;

}


body .fb-employee-details-inline
button.fb-employee-inline-action span,
body .fb-employee-details-inline
button.fb-employee-inline-action i {

    color: #C89B3C !important;

}


body .fb-employee-details-inline
button.fb-employee-inline-action:hover {

    background: #C89B3C !important;

    color: #000000 !important;

    border-color: #C89B3C !important;

}


body .fb-employee-details-inline
button.fb-employee-inline-action:hover span,
body .fb-employee-details-inline
button.fb-employee-inline-action:hover i {

    color: #000000 !important;

}


/* ==========================================================
   PAGE EMPTY / ERROR
========================================================== */

.fb-employees-empty {

    width: 100%;

    min-height: 190px;

    padding: 35px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E1E1E1;

    border-radius: 18px;

    text-align: center;

}


.fb-employees-empty-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            200,
            155,
            60,
            .12
        );

    color: #C89B3C;

    border-radius: 50%;

}


.fb-employees-empty h3 {

    margin: 0 0 6px;

    color: #171717;

    font-size: 17px;

    font-weight: 700;

}


.fb-employees-empty p {

    margin: 0;

    color: #777777;

    font-size: 13px;

    line-height: 1.5;

}


.fb-employees-error
.fb-employees-empty-icon {

    background:
        rgba(
            180,
            35,
            24,
            .08
        );

    color: #B42318;

}


/* ==========================================================
   PAGE LOADING
========================================================== */

.fb-employees-loading {

    width: 100%;

    min-height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    background: #FFFFFF;

    border: 1px solid #E1E1E1;

    border-radius: 18px;

    color: #777777;

    font-size: 12px;

}


.fb-employees-loading i {

    color: #C89B3C;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .fb-employee-card {

        grid-template-columns:
            minmax(240px, 1fr)
            minmax(260px, 1fr);

    }


    .fb-employee-card-action {

        grid-column: 1 / -1;

    }


    body .fb-employees-wrapper
    button.fb-employee-view {

        width: 100% !important;

    }


    .fb-employee-inline-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


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

@media (max-width: 700px) {

    .fb-employees-wrapper {

        padding:
            24px 16px
            32px;

    }


    .fb-employees-header {

        gap: 16px;

        margin-bottom: 25px;

    }


    .fb-employees-title {

        font-size: 27px !important;

    }


    .fb-employees-header-count {

        width: 100px;

        min-width: 100px;

        min-height: 68px;

        padding: 10px 12px;

    }


    .fb-employees-toolbar {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }


    body .fb-employees-wrapper
    #fb-new-employee {

        width: 100% !important;

    }


    .fb-employees-list {

        gap: 14px;

    }


    .fb-employee-card {

        min-height: 0;

        padding: 20px;

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .fb-employee-card-stats {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .fb-employee-details-inline {

        padding: 18px;

    }


    .fb-employee-inline-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        padding-right: 0;

        padding-top: 35px;

    }


    .fb-employee-inline-actions {

        display: grid;

        grid-template-columns: 1fr;

    }


    body .fb-employee-details-inline
    button.fb-employee-inline-action {

        width: 100% !important;

    }

}


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

@media (max-width: 480px) {

    .fb-employees-header {

        align-items: flex-start;

    }


    .fb-employees-subtitle {

        font-size: 13px !important;

    }


    .fb-employees-header-count {

        width: 88px;

        min-width: 88px;

    }


    .fb-employee-card-identity {

        align-items: flex-start;

    }


    .fb-employee-avatar {

        width: 46px;

        height: 46px;

        min-width: 46px;

    }


    .fb-employee-contact {

        flex-direction: column;

        gap: 5px;

    }


    .fb-employee-card-stats {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .fb-employee-stat:last-child {

        grid-column: 1 / -1;

        padding-top: 10px;

        padding-left: 0;

        border-top: 1px solid #ECECEC;

        border-left: none;

    }


    .fb-employee-inline-grid {

        grid-template-columns: 1fr;

    }


    .fb-employee-booking-item {

        align-items: flex-start;

        flex-direction: column;

    }


    .fb-employee-booking-status {

        align-self: flex-start;

    }

}

/* ==========================================================
   EMPLOYEE FORM MODAL
   New Employee / Edit Employee
========================================================== */


/* ==========================================================
   MODAL OVERLAY
========================================================== */

#fb-employee-form-overlay.fb-employee-form-overlay {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 999999 !important;

    display: flex !important;

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

    padding: 30px 20px !important;

    box-sizing: border-box !important;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease !important;

}


/* Active modal */

#fb-employee-form-overlay.fb-employee-form-overlay.active {

    opacity: 1 !important;

    visibility: visible !important;

}


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

#fb-employee-form-overlay .fb-employee-form-backdrop {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(0, 0, 0, 0.58) !important;

    backdrop-filter: blur(2px);

    z-index: 1 !important;

}


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

#fb-employee-form-overlay .fb-employee-form-panel {

    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;
    max-width: 650px !important;

    max-height: calc(100vh - 60px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    margin: 0 auto !important;

    background: #FFFFFF !important;

    border-radius: 16px !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.22) !important;

    box-sizing: border-box !important;

    transform: translateY(20px);

    transition:
        transform 0.25s ease !important;

}


#fb-employee-form-overlay.active .fb-employee-form-panel {

    transform: translateY(0) !important;

}


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

#fb-employee-form-overlay .fb-employee-form-header {

    position: relative !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 20px !important;

    padding: 26px 24px 22px !important;

    margin: 0 !important;

    border-bottom: 1px solid #E8E8E8 !important;

    box-sizing: border-box !important;

}


#fb-employee-form-overlay .fb-employee-form-header > div {

    min-width: 0 !important;

}


/* Eyebrow */

#fb-employee-form-overlay .fb-employee-form-eyebrow {

    display: block !important;

    margin: 0 0 7px !important;

    padding: 0 !important;

    color: #C89B3C !important;

    font-size: 10px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.7px !important;

}


/* Title */

#fb-employee-form-overlay .fb-employee-form-header h2 {

    margin: 0 0 7px !important;

    padding: 0 !important;

    color: #111111 !important;

    font-size: 24px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

}


/* Subtitle */

#fb-employee-form-overlay .fb-employee-form-header p {

    margin: 0 !important;

    padding: 0 !important;

    color: #777777 !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

}


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

#fb-employee-form-overlay .fb-employee-form-close {

    width: 44px !important;
    height: 40px !important;

    min-width: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

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

    background: #FFFFFF !important;

    color: #B73567 !important;

    border: 1px solid #B73567 !important;

    border-radius: 4px !important;

    box-shadow: none !important;

    cursor: pointer !important;

    font-size: 18px !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    transition:
        background 0.2s ease,
        color 0.2s ease !important;

}


#fb-employee-form-overlay .fb-employee-form-close:hover {

    background: #B73567 !important;

    color: #FFFFFF !important;

}


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

#fb-employee-form-overlay .fb-employee-form-body {

    width: 100% !important;

    padding: 24px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

}


#fb-employee-form-overlay .fb-employee-form {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

}


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

#fb-employee-form-overlay .fb-employee-form-grid {

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    column-gap: 14px !important;
    row-gap: 15px !important;

    margin: 0 !important;
    padding: 0 !important;

}


/* Full-width field */

#fb-employee-form-overlay .fb-employee-form-field-full {

    grid-column: 1 / -1 !important;

}


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

#fb-employee-form-overlay .fb-employee-form-field {

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

}


/* Labels */

#fb-employee-form-overlay .fb-employee-form-field > label {

    display: block !important;

    margin: 0 0 6px !important;

    padding: 0 !important;

    color: #111111 !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

}


#fb-employee-form-overlay .fb-employee-form-field .required {

    color: #B73567 !important;

}


/* ==========================================================
   INPUTS
========================================================== */

#fb-employee-form-overlay .fb-employee-form-field input[type="text"],
#fb-employee-form-overlay .fb-employee-form-field input[type="email"],
#fb-employee-form-overlay .fb-employee-form-field input[type="tel"],
#fb-employee-form-overlay .fb-employee-form-field input[type="number"],
#fb-employee-form-overlay .fb-employee-form-field select {

    width: 100% !important;

    height: 45px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    background: #FFFFFF !important;

    color: #222222 !important;

    border: 1px solid #D4D4D4 !important;

    border-radius: 8px !important;

    outline: none !important;

    box-shadow: none !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: normal !important;

    box-sizing: border-box !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;

}


/* Placeholder */

#fb-employee-form-overlay
.fb-employee-form-field
input::placeholder,

#fb-employee-form-overlay
.fb-employee-form-field
textarea::placeholder {

    color: #999999 !important;

    opacity: 1 !important;

}


/* Focus */

#fb-employee-form-overlay .fb-employee-form-field input:focus,
#fb-employee-form-overlay .fb-employee-form-field select:focus,
#fb-employee-form-overlay .fb-employee-form-field textarea:focus {

    border-color: #C89B3C !important;

    box-shadow:
        0 0 0 2px rgba(200, 155, 60, 0.12) !important;

}


/* ==========================================================
   TEXTAREA
========================================================== */

#fb-employee-form-overlay .fb-employee-form-field textarea {

    display: block !important;

    width: 100% !important;

    min-height: 100px !important;

    margin: 0 !important;

    padding: 13px 14px !important;

    background: #FFFFFF !important;

    color: #222222 !important;

    border: 1px solid #D4D4D4 !important;

    border-radius: 8px !important;

    outline: none !important;

    box-shadow: none !important;

    resize: vertical !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 400 !important;

    line-height: 1.5 !important;

    box-sizing: border-box !important;

}


/* ==========================================================
   VISIBILITY BOX
========================================================== */

#fb-employee-form-overlay .fb-employee-visibility-box {

    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    padding: 14px 16px !important;

    margin: 0 !important;

    background: #F8F8F8 !important;

    border: 1px solid #E5E5E5 !important;

    border-radius: 8px !important;

    box-sizing: border-box !important;

}


#fb-employee-form-overlay .fb-employee-visibility-text {

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;

}


#fb-employee-form-overlay .fb-employee-visibility-text strong {

    margin: 0 !important;

    color: #111111 !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

}


#fb-employee-form-overlay .fb-employee-visibility-text span {

    margin: 0 !important;

    color: #777777 !important;

    font-size: 12px !important;

    font-weight: 400 !important;

    line-height: 1.4 !important;

}


/* ==========================================================
   TOGGLE
========================================================== */

#fb-employee-form-overlay .fb-employee-toggle {

    position: relative !important;

    display: inline-block !important;

    width: 44px !important;
    height: 24px !important;

    min-width: 44px !important;

    margin: 0 !important;

    cursor: pointer !important;

}


#fb-employee-form-overlay .fb-employee-toggle input {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;

}


#fb-employee-form-overlay .fb-employee-toggle-slider {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    background: #CCCCCC !important;

    border-radius: 999px !important;

    transition:
        background 0.2s ease !important;

}


#fb-employee-form-overlay .fb-employee-toggle-slider::before {

    content: "" !important;

    position: absolute !important;

    width: 18px !important;
    height: 18px !important;

    left: 3px !important;
    top: 3px !important;

    background: #FFFFFF !important;

    border-radius: 50% !important;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.18) !important;

    transition:
        transform 0.2s ease !important;

}


#fb-employee-form-overlay
.fb-employee-toggle
input:checked
+
.fb-employee-toggle-slider {

    background: #C89B3C !important;

}


#fb-employee-form-overlay
.fb-employee-toggle
input:checked
+
.fb-employee-toggle-slider::before {

    transform: translateX(20px) !important;

}


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

#fb-employee-form-overlay .fb-employee-form-message {

    width: 100% !important;

    margin: 18px 0 0 !important;

    padding: 11px 13px !important;

    border-radius: 6px !important;

    font-size: 12px !important;

    line-height: 1.45 !important;

    box-sizing: border-box !important;

}


#fb-employee-form-overlay .fb-employee-form-message.error {

    background: #FFF2F2 !important;

    color: #A92A2A !important;

    border: 1px solid #F0CACA !important;

}


#fb-employee-form-overlay .fb-employee-form-message.success {

    background: #EFFAF2 !important;

    color: #287A3B !important;

    border: 1px solid #CDEBD4 !important;

}


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

#fb-employee-form-overlay .fb-employee-form-actions {

    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;

    margin: 24px 0 0 !important;

    padding: 18px 0 0 !important;

    border-top: 1px solid #E8E8E8 !important;

    box-sizing: border-box !important;

}


/* Shared button */

#fb-employee-form-overlay .fb-employee-form-button {

    min-height: 42px !important;

    margin: 0 !important;

    padding: 10px 18px !important;

    display: inline-flex !important;

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

    gap: 7px !important;

    border-radius: 4px !important;

    box-shadow: none !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease !important;

}


/* Cancel */

#fb-employee-form-overlay .fb-employee-form-cancel {

    background: #FFFFFF !important;

    color: #B73567 !important;

    border: 1px solid #B73567 !important;

}


#fb-employee-form-overlay .fb-employee-form-cancel:hover {

    background: #FDF5F8 !important;

}


/* Create Employee */

#fb-employee-form-overlay .fb-employee-form-save {

    min-width: 135px !important;

    background: #C89B3C !important;

    color: #111111 !important;

    border: 1px solid #C89B3C !important;

}


#fb-employee-form-overlay .fb-employee-form-save:hover {

    background: #B98C32 !important;

    border-color: #B98C32 !important;

}


/* Disabled */

#fb-employee-form-overlay .fb-employee-form-save:disabled {

    opacity: 0.65 !important;

    cursor: not-allowed !important;

}


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

@media (max-width: 768px) {

    #fb-employee-form-overlay.fb-employee-form-overlay {

        align-items: flex-start !important;

        padding: 20px 14px !important;

        overflow-y: auto !important;

    }


    #fb-employee-form-overlay .fb-employee-form-panel {

        max-height: none !important;

        margin: auto 0 !important;

        border-radius: 12px !important;

    }


    #fb-employee-form-overlay .fb-employee-form-header {

        padding: 22px 18px 18px !important;

    }


    #fb-employee-form-overlay .fb-employee-form-header h2 {

        font-size: 21px !important;

    }


    #fb-employee-form-overlay .fb-employee-form-body {

        padding: 20px 18px !important;

    }


    #fb-employee-form-overlay .fb-employee-form-grid {

        grid-template-columns:
            1fr !important;

    }


    #fb-employee-form-overlay .fb-employee-form-field-full {

        grid-column: auto !important;

    }


    #fb-employee-form-overlay .fb-employee-visibility-box {

        align-items: flex-start !important;

    }


    #fb-employee-form-overlay .fb-employee-form-actions {

        display: grid !important;

        grid-template-columns:
            1fr 1fr !important;

    }


    #fb-employee-form-overlay .fb-employee-form-button {

        width: 100% !important;

    }

}


@media (max-width: 480px) {

    #fb-employee-form-overlay.fb-employee-form-overlay {

        padding: 10px !important;

    }


    #fb-employee-form-overlay .fb-employee-form-panel {

        border-radius: 10px !important;

    }


    #fb-employee-form-overlay .fb-employee-form-actions {

        grid-template-columns:
            1fr !important;

    }

}

/* ==========================================================
   EMPLOYEE MODAL BUTTON FIX
   Close + Cancel
========================================================== */


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

body #fb-employee-form-overlay
button.fb-employee-form-close {

    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
    min-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;

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

    background: #000000 !important;
    background-color: #000000 !important;

    color: #C89B3C !important;

    border: 1px solid #000000 !important;
    border-radius: 7px !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease !important;

}


/* The × itself */

body #fb-employee-form-overlay
button.fb-employee-form-close span {

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #C89B3C !important;

    font-size: 20px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

}


/* Hover */

body #fb-employee-form-overlay
button.fb-employee-form-close:hover {

    background: #C89B3C !important;
    background-color: #C89B3C !important;

    color: #000000 !important;

    border-color: #C89B3C !important;

}


body #fb-employee-form-overlay
button.fb-employee-form-close:hover span {

    color: #000000 !important;

}


/* ==========================================================
   CANCEL BUTTON
========================================================== */

body #fb-employee-form-overlay
button.fb-employee-form-cancel {

    min-width: 92px !important;
    min-height: 42px !important;

    margin: 0 !important;

    padding: 0 18px !important;

    display: inline-flex !important;

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

    background: #000000 !important;
    background-color: #000000 !important;

    color: #C89B3C !important;

    border: 1px solid #000000 !important;
    border-radius: 7px !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    text-transform: none !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease !important;

}


/* Cancel button text */

body #fb-employee-form-overlay
button.fb-employee-form-cancel span {

    color: #C89B3C !important;

}


/* Cancel hover */

body #fb-employee-form-overlay
button.fb-employee-form-cancel:hover {

    background: #C89B3C !important;
    background-color: #C89B3C !important;

    color: #000000 !important;

    border-color: #C89B3C !important;

}


body #fb-employee-form-overlay
button.fb-employee-form-cancel:hover span {

    color: #000000 !important;

}


/* ==========================================================
   CREATE EMPLOYEE BUTTON
   Keep consistent with Services modal
========================================================== */

body #fb-employee-form-overlay
button.fb-employee-form-save {

    min-width: 135px !important;
    min-height: 42px !important;

    margin: 0 !important;

    padding: 0 18px !important;

    display: inline-flex !important;

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

    background: #C89B3C !important;
    background-color: #C89B3C !important;

    color: #000000 !important;

    border: 1px solid #000000 !important;
    border-radius: 7px !important;

    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

}


body #fb-employee-form-overlay
button.fb-employee-form-save span {

    color: #000000 !important;

}


body #fb-employee-form-overlay
button.fb-employee-form-save:hover {

    background: #000000 !important;
    background-color: #000000 !important;

    color: #C89B3C !important;

    border-color: #000000 !important;

}


body #fb-employee-form-overlay
button.fb-employee-form-save:hover span {

    color: #C89B3C !important;

}