/* =========================================================
WORK EXPERIENCE TABLE
========================================================= */

.work-table-wrapper {

  
width: 100%;

box-sizing: border-box;

margin-top: 20px;

direction: rtl;

border-radius: 16px;

border:
    1px solid rgba(255, 255, 255, 0.10);

background:
    rgba(255, 255, 255, 0.035);

overflow: hidden;

transition:
    opacity 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  

}

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

.work-table-header {

  
display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

padding: 18px 20px;

border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
  

}

.work-table-header h3 {

  
margin: 0;

font-size: 12px;

font-weight: 600;

color: #ffffff;
  

}

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

.work-add-btn {

  
border: none;

border-radius: 999px;

padding: 10px 18px;

font-family: inherit;

font-size: 14px;

cursor: pointer;

background: #bfd730;

color: #111;

transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  

}

.work-add-btn:hover {

  
transform: translateY(-1px);

box-shadow:
    0 5px 18px rgba(191, 215, 48, 0.25);
  

}

/* =========================================================
   TABLE SCROLL
   Persian Red Scrollbar
   ========================================================= */

.work-table-scroll {

    width: 100%;

    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color: #a21c43 #ffffff;

}


/* =========================================================
   CHROME / EDGE / OPERA
   ========================================================= */

.work-table-scroll::-webkit-scrollbar {

    height: 8px;

}

.work-table-scroll::-webkit-scrollbar-track {

    background: #ffffff;

    border-radius: 999px;

}

.work-table-scroll::-webkit-scrollbar-thumb {

    background: #a21c43;

    border-radius: 999px;

    border: 2px solid #ffffff;

}

.work-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #8c1739;

}

/* =========================================================
TABLE
========================================================= */

.work-table {

  
width: 100%;

min-width: 1350px;

border-collapse: collapse;

direction: rtl;
  

}

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

.work-table th {

  
padding: 13px 12px;

white-space: nowrap;

font-size: 13px;

font-weight: 600;

color: #ffffff;

background:
    rgba(255, 255, 255, 0.045);

border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

text-align: center;
  

}

/* =========================================================
TABLE CELLS
========================================================= */

.work-table td {

  
padding: 10px;

border-bottom:
    1px solid rgba(255, 255, 255, 0.06);

text-align: center;

vertical-align: middle;
  

}

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

.work-table input,
.work-table select {

  
width: 100%;

min-width: 120px;

box-sizing: border-box;

padding: 9px 10px;

border-radius: 8px;

border:
    1px solid rgba(255, 255, 255, 0.12);

background:
    rgba(255, 255, 255, 0.05);

color: #ffffff;

font-family: inherit;

font-size: 13px;

outline: none;
  

}

.work-table input:focus,
.work-table select:focus {

  
border-color: #bfd730;

box-shadow:
    0 0 0 2px rgba(191, 215, 48, 0.10);
  

}

.work-table select option {

  
background: #202020;

color: #ffffff;
  

}

/* =========================================================
PHONE
========================================================= */

.work-phone-input {

  
min-width: 150px !important;
  

}

/* =========================================================
WORK ADDRESS INPUT
========================================================= */

.work-address-input {

min-width: 220px !important;

}

/* =========================================================
LEAVING REASON BUTTON
========================================================= */

.work-modal-open-btn {

border: none;

border-radius: 8px;

padding: 8px 14px;

font-family: inherit;

font-size: 13px;

cursor: pointer;

background:
    rgba(191, 215, 48, 0.12);

color: #bfd730;

transition: 0.25s ease;

white-space: nowrap;

}

.work-modal-open-btn {

background:
    rgba(191, 215, 48, 0.22);

transform: translateY(-1px);

}

/* =========================================================
REASON PREVIEW
========================================================= */

.work-text-preview {

display: inline-block;

max-width: 180px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

vertical-align: middle;

color:
    rgba(255, 255, 255, 0.75);

margin-left: 6px;

}

/* =========================================================
DELETE BUTTON
========================================================= */

.work-delete-btn {

  
border: none;

border-radius: 8px;

padding: 8px 12px;

font-family: inherit;

cursor: pointer;

background:
    rgba(220, 50, 50, 0.15);

color: #ff7777;

transition: 0.25s ease;
  

}

.work-delete-btn:hover {

  
background:
    rgba(220, 50, 50, 0.25);

transform: translateY(-1px);
  

}

/* =========================================================
EMPTY MESSAGE
========================================================= */

.work-table-empty {

  
padding: 18px 20px;

text-align: center;

font-size: 13px;

color:
    rgba(255, 255, 255, 0.55);
  

}

/* =========================================================
ACTIVE STATE
========================================================= */

.work-table-wrapper {

  
border-color:
    rgba(191, 215, 48, 0.25);

box-shadow:
    0 0 25px rgba(191, 215, 48, 0.04);
  

}

/* =========================================================
FULL-SCREEN MODAL
========================================================= */

.work-text-modal {

  
position: fixed;

inset: 0;

z-index: 99999;

display: none;

align-items: center;

justify-content: center;

padding: 20px;
  

}

.work-text-modal.show {

  
display: flex;
  

}

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

.work-text-modal-overlay {

  
position: absolute;

inset: 0;

background:
    rgba(0, 0, 0, 0.75);

backdrop-filter:
    blur(8px);
  

}

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

.work-text-modal-content {

  
position: relative;

z-index: 1;

width: min(900px, 100%);

max-height: 80vh;

display: flex;

flex-direction: column;

border-radius: 18px;

border:
    1px solid rgba(255, 255, 255, 0.12);

background:
    #202020;

box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.45);

overflow: hidden;
  

}

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

.work-text-modal-header {

  
display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

padding: 18px 20px;

border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
  

}

.work-text-modal-header h3 {

  
margin: 0;

color: #ffffff;

font-size: 17px;

font-weight: 600;
  

}

.work-text-modal-close {

  
width: 36px;

height: 36px;

border: none;

border-radius: 50%;

background:
    rgba(255, 255, 255, 0);

color: #ffffff;

font-size: 24px;

line-height: 1;

cursor: pointer;

transition: 0.25s ease;
  

}

.work-text-modal-close:hover {

  
background:
    rgba(220, 50, 50, 0);

color: #ff7777;
  

}

/* =========================================================
MODAL BODY
========================================================= */

.work-text-modal-body {

  
padding: 10px;

flex: 1;
  

}
/* =========================================================
DEFAULT / PLACEHOLDER ROW
========================================================= */

.work-default-record {

opacity: 0.55;

}

/*

The placeholder row is informational only.
*/

.work-default-record input,
.work-default-record select,
.work-default-record button {

cursor: default;

}

/* =========================================================
MODAL TEXTAREA
Always editable when modal opens
========================================================= */

.work-text-modal-body textarea {

width: 100%;

min-height: 150px;

box-sizing: border-box;

resize: vertical;

padding: 15px;

border-radius: 10px;

border:
    1px solid rgba(255, 255, 255, 0.12);

background:
    rgba(255, 255, 255, 0.05);

color: #ffffff;

font-family: inherit;

font-size: 14px;

line-height: 1.8;

outline: none;

direction: rtl;

}

.work-text-modal-body textarea {

border-color: #bfd730;

box-shadow:
    0 0 0 2px rgba(191, 215, 48, 0.10);

}

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

.work-text-modal-footer {

display: flex;

justify-content: flex-start;

padding: 15px 20px;

border-top:
    1px solid rgba(255, 255, 255, 0.08);

}

/* =========================================================
MODAL EDIT BUTTON
========================================================= */

.work-modal-edit-btn {

  
border: none;

border-radius: 999px;

padding: 9px 18px;

font-family: inherit;

cursor: pointer;

background:
    rgba(255, 255, 255, 0.08);

color: #ffffff;

transition: 0.25s ease;
  

}

.work-modal-edit-btn:hover {

  
background:
    rgba(255, 255, 255, 0.14);
  

}

/* =========================================================
MODAL SAVE BUTTON
========================================================= */

.work-modal-save-btn {

  
border: none;

border-radius: 999px;

padding: 9px 20px;

font-family: inherit;

cursor: pointer;

background: #bfd730;

color: #111;

transition: 0.25s ease;
  

}

.work-modal-save-btn:hover {

  
transform: translateY(-1px);

box-shadow:
    0 5px 18px rgba(191, 215, 48, 0.25);
  

}

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

@media (max-width: 768px) {

  
.work-table-header {

    align-items: flex-start;

    flex-direction: column;

}


.work-add-btn {

    width: 100%;

}


.work-text-modal {

    padding: 10px;

}


.work-text-modal-content {

    width: 100%;

    max-height: 95vh;

    border-radius: 14px;

}


.work-text-modal-body textarea {

    min-height: 280px;

}
  

}