:root{
    --darkBrown: #171717;
    --brownShadow: #333333;
    --brown: #FBB731;
    --lightBrown: #1e1e1e;
    --frmBackground: #171717;
    --green: #727552;
    --lightGreen: #8a8d6a;
    --white: #252525;
    --red: #CC2936;
    --lightRed: #e04550;
    --yellow: #FBB731;
    --lightYellow: #fcc85a;
    --blue: #4A708B;
    --lightBlue: #6C8DA5;
    --orange: #D2691E;
    --lightOrange: #F4A460;
    --textPrimary: #F2F2F2;
    --textSecondary: #888888;
    --textMuted: #6a6a6a;
    --cardBg: #252525;
    --cardBorder: #333333;
    --inputBg: #2a2a2a;
    --trueWhite: #FFFFFF;
    --avgLine: #F2F2F2;
}
*{
    padding: 0;
    border: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textPrimary);
    font-size: 1vw;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--darkBrown);
}
table{
    width: 100%;
}
table, td{
    border-collapse: collapse;
}
ul, li{
    user-select: none;
}

#toolTip{
    padding: 5px;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    color: var(--white);
    display: none;
    z-index: 10;
    -webkit-transition:opacity 0.5s;
    -moz-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
    transition:opacity 0.5s;
}

#infoBox{
    width: 250px;
    color: var(--darkBrown);
    background-color: var(--white);
    border: 2px solid var(--red);
    border-radius: 15px;
    z-index: 4;
    display: none;
    position: absolute;
    margin: 0;
    padding: 15px;
    text-align: center;
    font-family: 'roboto', sans-serif;
}
#infoBox header{
    margin: 15px 0 15px 0;
    color: var(--red);
    font-family: 'roboto', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
#infoBox img{
    margin-bottom: 3px;
    height: 50px;
    width: 50px;
}
#infoBox p{
    font-family: 'roboto', sans-serif;
    font-size: 20px;
}
#infoBox .btnBox{
    margin: 10px 0 10px 0;
    width: 100%;
    clear: both;
}
#infoBox .btnBox div{
    margin-bottom: 10px;
    color: var(--white);
    height: 40px;
    line-height: 37px;
    border-radius: 5px;
    font-size: 24px;
    cursor: pointer;
}

#dataListCon{
    position: absolute;
    display: none;
    background-color: var(--white);
    border: 1px solid var(--darkBrown);
    z-index: 4;
    overflow-y: auto;
}
#dataList{
    width: 100%;
    height: 100%;
    text-align: left;
}
#dataList tr{
  position: relative;
  height: 40px;
}
#dataList td{
    text-align: left;
    border-bottom: 1px solid var(--darkBrown);
    height: 25px;
    cursor: pointer;
    width: 100%;
    padding-left: 5px;
    vertical-align: middle;
}
#dataList td:hover{
    background-color: var(--lightBrown);
}
#dataList img{
    height: 20px;
    display: inline-block;
}

#imgView{
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: alias;
}
#imgView .photoCon{
    position: relative;
}
#imgView .mainImg{
    max-height: 90vh;
    max-width: 80vw;
}
#imgView .prevBtn{
    position: absolute;
    top: 0;
    left: 0;
    height: 5vw;
    z-index: 2;
    margin-left: -7vw;
    cursor: pointer;
}
#imgView .nextBtn{
    position: absolute;
    top: 0;
    right: 0;
    height: 5vw;
    z-index: 2;
    margin-right: -7vw;
    cursor: pointer;
}


.gFullFrm{
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    display: none;
    padding: 0 32px;
    box-sizing: border-box;
    /* Absolute centering — works regardless of whether #fullView is display:block or display:flex */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.gFullFrm .frmCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: clamp(30px, 10vh, 100px) 0 20px 0;
    box-sizing: border-box;
}
.gFullFrm .header{
    text-align: center;
    margin-bottom: 24px;
}
.gFullFrm .frmCon input{
    height: 56px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 14px;
    color: var(--textPrimary);
    padding-left: 20px;
    padding-right: 18px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.gFullFrm .frmCon input:focus{
    border-color: var(--brown);
}
.gFullFrm .frmCon input::placeholder{
    color: #555555;
}
.gFullFrm .frmCon img{
    width: 100%;
    max-width: 150px;
}
.gFullFrm .btnBox{
    text-align: center;
    width: 100%;
    margin-top: 8px;
}
.gFullFrm .frmCon a{
    color: var(--brown);
    text-align: center;
    text-decoration: none;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-top: 14px;
    display: inline-block;
}
.gFullFrm .frmCon a:hover{
    text-decoration: underline;
}
.gFullFrm .gFrmLabel{
    width: 100%;
    box-sizing: border-box;
}
.gFullFrm .gBtnSave{
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   GLOBAL FORM DESIGN — shared shell for every floating modal form.
   Single source of truth: edits here propagate to all 19 forms.
   ============================================================ */
.gFrm {
  display: none; /* JS changes none → flex */
  flex-flow: column nowrap;
  width: 100%;
  max-height: 85vh;
  background-color: var(--lightBrown);
  border: 1px solid var(--cardBorder);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  color-scheme: dark; /* tells the browser to use dark chrome for native widgets */
}
.gFrmHeader {
  padding: 16px 20px;
  position: sticky;
  top: 0;
  background-color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cardBorder);
  z-index: 30;
}
.gFrmHeader > span{
  color: var(--textPrimary);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: 'Inter Tight', sans-serif;
}
.gFrmBody{
    padding: 8px 0;
    overflow-y: auto;
    height: 100%;
}
/* Legacy scroll-area class kept for forms that use it instead of gFrmBody */
.gFrmContent {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(85vh - 130px);
  padding: 10px 12px;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.gFrmFooter {
  position: sticky;
  bottom: 0;
  background: var(--white);
  border-top: 1px solid var(--cardBorder);
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  z-index: 40;
}
.gFrmBtnBox{
    background-color: var(--white);
    position: sticky;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    bottom: 0;
    border-top: solid 1px var(--cardBorder);
}
/* Info box — soft tint + colored left-bar + ⓘ glyph. Both class names
   covered: .gFrmInfoBox (canonical) and .infoMsg (used by frmTicketReview
   et al). The unified rule means any <p class="infoMsg"> gets the same
   treatment as a <div class="gFrmInfoBox">. */
.gFrmInfoBox,
.gFrm .infoMsg{
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(204,41,54,0.35);
  border-left: 3px solid var(--red);
  background-color: rgba(204,41,54,0.10);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 22px;
  color: var(--lightRed);
  font-size: 12.5px;
  line-height: 1.5;
}
.gFrmInfoBox::before,
.gFrm .infoMsg::before{
  content: 'ⓘ';
  color: var(--lightRed);
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.5;
}
.gFrmInfoBox p{
  color: var(--lightRed);
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.gFrmInfoBox img{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}


/* Section — two-column grid: small uppercase label on the left,
   fields stacked on the right. Sections separated by visible divider. */
.gFrmSection{
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--cardBorder);
}
.gFrmSection:last-child{
    border-bottom: none;
}
.gFrmSection p{
  font-weight: normal;
  color: var(--textSecondary);
  font-size: 12px;
  margin-top: 6px;
  padding-right: 8px;
}
.gFrmSection .desc{
    width: auto;
    color: var(--textPrimary);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: 'Inter Tight', sans-serif;
    padding-top: 8px;
    line-height: 1.4;
}
.gFrmSection .detail{
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gFrmChkBox{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px;
    color: var(--textPrimary);
    font-size: 13px;
}
.gFrmChkBox input{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--cardBorder);
    border-radius: 3px;
    cursor: pointer;
    margin: 0;
    display: inline-grid;
    place-content: center;
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.gFrmChkBox input:checked{
    background: var(--brown);
    border-color: var(--brown);
}
.gFrmChkBox input:checked::after{
    content: '';
    width: 9px;
    height: 9px;
    background: var(--darkBrown);
    clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 80% 0%, 38% 65%);
}

/* Labels + inputs — unified dark theme, soft inset depth, gold focus glow.
   Selectors target the shared classes AND broader .gFrm-scoped fallbacks
   so form-specific classes like .reviewLabel and bare <input> siblings
   pick up the same styling automatically. */
.gFrmLabel,
.gFrm .reviewLabel{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--textSecondary);
    font-weight: 500;
    display: block;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 6px;
}
/* Explicit type list with !important — Chrome's date/time inputs have
   internal user-agent styling that overrides normal rules. !important on
   bg + appearance:none forces our dark theme to win. */
.gFrm input[type="text"],
.gFrm input[type="email"],
.gFrm input[type="password"],
.gFrm input[type="tel"],
.gFrm input[type="number"],
.gFrm input[type="url"],
.gFrm input[type="search"],
.gFrm input[type="date"],
.gFrm input[type="time"],
.gFrm input[type="datetime-local"],
.gFrm input[type="month"],
.gFrm input[type="week"],
.gFrm input:not([type]),
.gFrm select,
.gFrm textarea{
    display: block;
    outline: none;
    margin-top: 6px;
    width: 100%;
    height: 44px;
    border: 1px solid var(--cardBorder) !important;
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 10px !important;
    box-sizing: border-box;
    background-color: var(--inputBg) !important;
    background-image: none !important;
    color: var(--textPrimary) !important;
    -webkit-text-fill-color: var(--textPrimary) !important;
    caret-color: var(--brown);
    font-family: 'Poppins', sans-serif;
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

/* Chrome's date input internal pieces — needed to fully override the
   native widget chrome. Without these, the inner year/month/day segments
   keep their default light-theme rendering. */
.gFrm input[type="date"]::-webkit-datetime-edit,
.gFrm input[type="time"]::-webkit-datetime-edit,
.gFrm input[type="datetime-local"]::-webkit-datetime-edit{
    color: var(--textPrimary);
    padding: 0;
}
.gFrm input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.gFrm input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.gFrm input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper{
    background: transparent;
}
.gFrm input[type="date"]::-webkit-datetime-edit-text,
.gFrm input[type="time"]::-webkit-datetime-edit-text,
.gFrm input[type="datetime-local"]::-webkit-datetime-edit-text{
    color: var(--textSecondary);
    padding: 0 2px;
}
.gFrm input[type="date"]::-webkit-datetime-edit-month-field,
.gFrm input[type="date"]::-webkit-datetime-edit-day-field,
.gFrm input[type="date"]::-webkit-datetime-edit-year-field,
.gFrm input[type="time"]::-webkit-datetime-edit-hour-field,
.gFrm input[type="time"]::-webkit-datetime-edit-minute-field,
.gFrm input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.gFrm input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.gFrm input[type="datetime-local"]::-webkit-datetime-edit-year-field{
    color: var(--textPrimary);
    background: transparent;
}
.gFrm input[type="date"]::-webkit-datetime-edit-month-field:focus,
.gFrm input[type="date"]::-webkit-datetime-edit-day-field:focus,
.gFrm input[type="date"]::-webkit-datetime-edit-year-field:focus{
    background: rgba(251,183,49,0.15);
    color: var(--brown);
    outline: none;
}
.gFrm input[type="date"]::-webkit-inner-spin-button,
.gFrm input[type="date"]::-webkit-clear-button{
    display: none;
}
.gFrm textarea{
    height: auto;
    min-height: 110px;
}
.gFrm input[type="text"]:hover,
.gFrm input[type="email"]:hover,
.gFrm input[type="password"]:hover,
.gFrm input[type="tel"]:hover,
.gFrm input[type="number"]:hover,
.gFrm input[type="url"]:hover,
.gFrm input[type="search"]:hover,
.gFrm input[type="date"]:hover,
.gFrm input[type="time"]:hover,
.gFrm input[type="datetime-local"]:hover,
.gFrm select:hover,
.gFrm textarea:hover{
    border-color: #444;
}
.gFrm input[type="text"]:focus,
.gFrm input[type="email"]:focus,
.gFrm input[type="password"]:focus,
.gFrm input[type="tel"]:focus,
.gFrm input[type="number"]:focus,
.gFrm input[type="url"]:focus,
.gFrm input[type="search"]:focus,
.gFrm input[type="date"]:focus,
.gFrm input[type="time"]:focus,
.gFrm input[type="datetime-local"]:focus,
.gFrm select:focus,
.gFrm textarea:focus{
    border-color: var(--brown);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 0 3px rgba(251,183,49,0.12);
}
.gFrm input::placeholder,
.gFrm textarea::placeholder{
    color: var(--textMuted);
    font-style: italic;
}

/* Custom checkbox style applied to ALL checkboxes inside any .gFrm form
   (not just those inside .gFrmChkBox). Matches the "Show deleted" toggle
   and the pin checkbox so every form's checkboxes look identical. */
.gFrm input[type="checkbox"]{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
    border: 1.5px solid var(--cardBorder);
    border-radius: 3px;
    cursor: pointer;
    margin: 0 6px 0 0;
    display: inline-grid;
    place-content: center;
    background: transparent;
    vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.gFrm input[type="checkbox"]:checked{
    background: var(--brown);
    border-color: var(--brown);
}
.gFrm input[type="checkbox"]:checked::after{
    content: '';
    width: 9px;
    height: 9px;
    background: var(--darkBrown);
    clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 80% 0%, 38% 65%);
}
/* Date input — recolor the calendar glyph for dark theme */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
    filter: invert(0.75) brightness(1.1);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{
    opacity: 1;
}
/* Autofill — force Chrome's yellow fill back to our dark input bg */
.gFrmLabel input:-webkit-autofill,
.gFrmLabel input:-webkit-autofill:hover,
.gFrmLabel input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--textPrimary);
    -webkit-box-shadow: 0 0 0 1000px var(--inputBg) inset, inset 0 1px 2px rgba(0,0,0,0.25);
    transition: background-color 5000s ease-in-out 0s;
}

.gFrmInput{
    display: block;
    outline-color: var(--darkBrown);
    margin-top: 0.1vw;
    margin-bottom: 0.5vw;
    height: 2vw;
    width: calc(100% - 1vw);
    border: 1px solid var(--lightBrown);
    padding-left: 1vw;
    font-size: 110%;
}
.gFrmInput::placeholder{
    color: var(--lightBrown);
}
.gFrmDoubleInputCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    
}

.gFirstOption {
    color: var(--brown);
}
.gFrmLabel select{
    outline-color: var(--darkBrown);
    background-color: var(--white);
    display: block;
    margin-top: 0.1vw;
    margin-bottom: 0.5vw;
    height: 3vw;
    width: 100%;
    border: 1px solid var(--lightBrown);
    padding-left: 1vw;
    font-size: 120%;
    border-radius: 7px;
    box-sizing: border-box;
}
.gFrmLabel select:required:invalid{
    color: var(--lightBrown);
}
.gFrmLabel select option[value=""][disabled]{
    display: none;
}
.gFrmLabel select option{
    color: black;
}

.gFrmSelect{
    outline-color: var(--darkBrown);
    background-color: var(--white);
    display: block;
    margin-top: 0.1vw;
    margin-bottom: 0.5vw;
    height: 2vw;
    width: calc(100% - 1vw);
    border: 1px solid var(--lightBrown);
    padding-left: 1vw;
    font-size: 120%;
}
.gFrmSelect:required:invalid{
    color: var(--lightBrown);
}
.gFrmSelect option[value=""][disabled]{
    display: none;
}
.gFrmSelect option{
    color: black;
}

.gFrmLabel textarea{
    box-sizing: border-box;
    margin-top: 0.1vw;
    width: 100%;
    outline-color: var(--darkBrown);
    display: block;
    padding: 0.5vw 1vw 0.5vw 1vw;
    border-radius: 7px;
    font-family: 'roboto', sans-serif;
}

.gPhoneBox{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
}
.gPhoneBox .gPhoneCode{
    width: 18%;
    display: inline-block;
}
.gPhoneBox .gPhoneNo{
    width: 50%;
    display: inline-block;
}

.gFrmLabel .gAddShort{
    width: 50%;
}
.gFrmLabel .gAddZip{
    width: 20%;
}

.gNone{
    display: none;
}

.gQCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
}
.gQCon .gQ{
    font-weight: bold;
}
.gQCon .gACon{
    display: flex;
    flex-flow: row nowrap;
}
.gQCon .gACon div{
    opacity: 0.7;
    border: 1px solid var(--lightBrown);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4vw;
    height: 3vw;
    cursor: pointer;
    background-color: var(--white);
    border-radius: 7px;
}
.gQCon .gACon .yes.selected{
    opacity: 1;
    background-color: var(--green);
    color: var(--white);
}
.gQCon .gACon .no{
    margin-left: 0.5vw;
}
.gQCon .gACon .no.selected{
    opacity: 1;
    background-color: var(--red);
    color: var(--white);
}

.gItemsCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
}
.gItemsCon .gQ{
    font-weight: bold;
}
.gItemsCon .gItems{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
}
.gItemsCon .gItems div{
    color: var(--brown);
    background-color:var(--white);
    width: 20vw;
    max-width: 100px;
    height: 5vw;
    max-height: 40px;
    margin-bottom: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
}
.gItemsCon .gItems div.selected{
    opacity: 1;
    background-color: var(--green);
    color: var(--white);
}

.gItemsCon .gLabel{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
}


.gFloatView{
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 20;
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    text-align: center;
}
.gFloatScreen{
    width: 50vw;
    position: absolute;
    top: 4.4vw;
    z-index: 21;
    max-height: 83vh;
}

/*BUTTONS*/

.gBtnSave {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background: var(--brown);
  color: var(--darkBrown);
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: filter .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(251,183,49,0.18);
}
.gBtnSave:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(251,183,49,0.28);
}
.gBtnSave:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.gBtnDel {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 13px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter Tight', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
  white-space: nowrap;
}
.gBtnDel:hover {
  background: var(--red);
  color: var(--trueWhite);
  transform: translateY(-1px);
}

.gBtnAdd {
  background: var(--brown);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.gBtnAdd:hover {
  background: var(--brownShadow);
  transform: translateY(-1px);
}





.gClickable{
    cursor: pointer;
}
.gClickable:hover{
  font-weight: bold;
  background-color: var(--lightBrown);
}
.gBtnCloseFrm{
    width: 30px;
    height: 30px;
    padding: 7px;
    background: transparent;
    border: 1px solid var(--cardBorder);
    border-radius: 6px;
    cursor: pointer;
    object-fit: contain;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.gBtnCloseFrm:hover{
    border-color: var(--brown);
    background: rgba(251,183,49,0.08);
}
.gMask{
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 3;
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    text-align: center;
}
.gLoader{
    position: fixed;
    border: 8px solid var(--darkBrown);
    border-radius: 50%;
    border-top: 8px solid var(--lightBrown);
    border-bottom: 8px solid var(--lightBrown);
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 10px);
    margin-left: -30px;
    margin-top: -30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.gPayPlanDis{
    opacity: 0.5;
}


.js_textareaCon{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.js_textareaCon textarea{
  resize: vertical;
  overflow: auto;
  width: 100%;
  background-color: var(--inputBg);
  color: var(--textPrimary);
  caret-color: var(--brown);
  box-sizing: border-box;
  min-height: 110px;
  border: 1px solid var(--cardBorder);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.js_textareaCon textarea:hover{
    border-color: #444;
}
.js_textareaCon textarea:focus{
    border-color: var(--brown);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25), 0 0 0 3px rgba(251,183,49,0.12);
}
.js_textareaCon textarea::placeholder{
    color: var(--textMuted);
    font-style: italic;
}
.js_textareaCon span{
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: var(--textMuted);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}



/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#fullView{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}

#webView{
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    display: none;
}

#webView .mainHeader{
    display: flex;
    flex-flow: column nowrap;
    height: 64px;
    background-color: var(--lightBrown);
    border-bottom: 1px solid var(--cardBorder);
    flex-shrink: 0;
}

#webView .mainHeader .menuCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    padding: 0 18px;
    gap: 14px;
}
#webView .mainHeader .menuCon img{
    height: 32px;
    max-height: 32px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
/* Hide broken-icon for missing user avatar (empty src) */
#webView .mainHeader .menuCon img[src=""],
#webView .mainHeader .menuCon img:not([src]){
    display: none;
}
#webView .mainHeader .menuCon .search{
    height: 36px;
    max-height: 36px;
    width: 220px;
    background-color: var(--inputBg);
    border: 1px solid var(--cardBorder);
    color: var(--textPrimary);
    padding: 0 14px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}
#webView .mainHeader .menuCon .search:focus{
    border-color: var(--brown);
    background-color: var(--cardBg);
}
#webView .mainHeader .menuCon .search::placeholder{
    color: #555555;
}
#webView .mainHeader .menuCon ul{
    list-style: none;
    margin: 0 0 0 16px;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-family: 'Inter Tight', sans-serif;
}
#webView .mainHeader .menuCon li{
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 14px;
    cursor: pointer;
    text-align: center;
    color: var(--textPrimary);
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.15s, background-color 0.15s;
    user-select: none;
}
#webView .mainHeader .menuCon li:hover{
    color: var(--brown);
    background-color: rgba(251,183,49,0.05);
}

#webView .mainHeader .tabSelectBar{
    position: relative;
    width: 100%;
    height: 2px;
    background-color: transparent;
}
#webView .mainHeader .tabSelectBar .selector{
    position: relative;
    height: 100%;
    background-color: var(--brown);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(251,183,49,0.5);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#webView .mainHeader .rightHeader{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 18px;
}
#webView .mainHeader .userCon{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    margin: 0;
}
#webView .mainHeader .userCon .userName{
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--textPrimary);
    cursor: pointer;
    background-color: var(--cardBg);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--cardBorder);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
    letter-spacing: 0.2px;
}
#webView .mainHeader .userCon .userName:hover{
    border-color: var(--brown);
    color: var(--brown);
}
#webView .mainHeader .userCon .userType{
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 500;
}
#webView .mainHeader .userCon .logOut{
    cursor: pointer;
    font-style: normal;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: color 0.2s;
}
#webView .mainHeader .userCon .logOut:hover{
    color: var(--lightRed);
    text-decoration: underline;
    text-underline-offset: 3px;
}


#webView .contactList{
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-height: 0;
    overflow: hidden;
    background-color: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-top: none;
    border-radius: 0 0 12px 12px;
    z-index: 10;
    color: var(--textPrimary);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    /* Forces single-line items; dropdown auto-grows wider to fit the longest label
       (e.g. "Suppliers/Sub Contractors") so every item stays one line and the same height. */
    white-space: nowrap;
}
#webView .contactList div{
    padding: 12px 22px 12px 18px;
    text-align: left;
    border-left: 3px solid transparent;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--textPrimary);
    letter-spacing: 0.2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s, border-left-color 0.15s, padding-left 0.15s;
}
#webView .contactList div:hover{
    color: var(--brown);
    background-color: rgba(251,183,49,0.06);
    border-left-color: var(--brown);
    padding-left: 22px;
    font-weight: 500;
}

#webView .frmCon{
    display: flex;
    justify-content: center;
    background-color: var(--lightBrown);
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/*FORM PHOTO*/
#frmPhoto .imgCon{
    display: flex;
    justify-content: center;
    padding-top: 10px;
}
#frmPhoto .img{
    max-height: 300px;
    max-width: 100%;
}


/*FORM LOGIN*/
#frmLogin{
    font-size: 16px;
    display: block;
    width: 100%;
}
#frmLogin img{
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 36px;
}
#frmLogin .gFrmLabel{
    margin-bottom: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--textSecondary);
    width: 100%;
    box-sizing: border-box;
}
#frmLogin .gBtnSave{
    padding: 15px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    margin: 14px 0 0 0;
}
#frmLogin .btnForgot{
    cursor: pointer;
}
#frmLogin .secResetCode,
#frmLogin .secNewPass,
#frmLogin .secTaxi{
    display: none;
}

/* Taxidermy select screen */
#frmLogin .secTaxi{
    padding: 40px 0;
    justify-content: center;
}
#frmLogin .secTaxi .header{
    margin-bottom: 28px;
    width: 100%;
}
#frmLogin .secTaxi img{
    width: 100%;
    max-width: 130px;
    margin-bottom: 18px;
}
#frmLogin .secTaxi .taxiHeaderLabel{
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--textSecondary);
    margin-bottom: 6px;
}
#frmLogin .secTaxi h2{
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--brown);
    letter-spacing: 0.2px;
    line-height: 1.2;
}
#frmLogin .secTaxi .taxiHeaderSubtitle{
    width: 100%;
    margin: 8px 0 0 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--textSecondary);
    line-height: 1.4;
    letter-spacing: 0.1px;
}
#frmLogin .secTaxi .taxiSelectBox{
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    width: 100%;
    gap: 12px;
}
#frmLogin .secTaxi .taxiSelectOpt{
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    width: 100%;
    background-color: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 14px;
    min-height: 68px;
    padding: 12px 44px 12px 16px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: border-color 0.2s, background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
#frmLogin .secTaxi .taxiSelectOpt:hover{
    border-color: var(--brown);
    background-color: var(--inputBg);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(251,183,49,0.18);
}
#frmLogin .secTaxi .taxiSelectOpt::after{
    content: '›';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--textSecondary);
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    transition: color 0.2s, transform 0.2s;
}
#frmLogin .secTaxi .taxiSelectOpt:hover::after{
    color: var(--brown);
    transform: translateY(-50%) translateX(3px);
}
#frmLogin .secTaxi .taxiSelectOpt img{
    width: 44px;
    height: 44px;
    margin: 0;
    object-fit: cover;
    border-radius: 10px;
    background-color: var(--inputBg);
    flex-shrink: 0;
    filter: none;
}
/* Hide broken-image icon for outfits without an uploaded logo (e.g. Nylstroom) — keeps layout consistent */
#frmLogin .secTaxi .taxiSelectOpt img[src=""],
#frmLogin .secTaxi .taxiSelectOpt img:not([src]){
    /* Show as a dark rounded placeholder square — same dimensions, no broken-image icon */
    color: transparent;
    font-size: 0;
}
#frmLogin .secTaxi .taxiSelectOpt span{
    font-size: 15px;
    font-weight: 600;
    margin-left: 14px;
    color: var(--textPrimary);
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.1px;
    line-height: 1.3;
}

/*FORM DASHBOARD*/
#frmDash{
    overflow-x: hidden;
}
#frmDash .gFrm{
    box-shadow: none;
}
/* ===========================================================
   #frmDash — Trophies Dashboard (redesigned 2026-05-17)
   =========================================================== */
#frmDash{
    overflow-y: auto;
    padding: 20px;
}
#frmDashLCon{
    display: flex;
    flex-direction: column;
}
#frmDash .frmDashSectionHead{
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--textSecondary);
    margin: 24px 0 12px 0;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#frmDash .frmDashSectionHead::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cardBorder);
}
#frmDash #frmDashLCon > .frmDashSectionHead:first-child{
    margin-top: 0;
}
#frmDash .frmDashGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
#frmDash .frmDashGrid4{
    grid-template-columns: repeat(4, 1fr);
}
#frmDash .frmDashGridHero{
    grid-template-columns: 2fr 1fr;
}

/* ----- KPI tile ----- */
#frmDash .infoCon{
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.05s;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: none;
    margin-bottom: 0;
}
#frmDash .infoCon:hover{
    border-color: var(--brown);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
#frmDash .infoCon:active{
    transform: translateY(1px);
}

#frmDash .infoCon .kpiHead{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#frmDash .infoCon .kpiTitle{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--textPrimary);
}
#frmDash .infoCon .kpiBadge{
    font-family: 'Inter Tight', sans-serif;
    font-size: 10.5px;
    color: var(--textMuted);
    padding: 3px 8px;
    border: 1px solid var(--cardBorder);
    border-radius: 10px;
    text-transform: lowercase;
}
#frmDash .infoCon.alertTile .kpiBadge{
    color: var(--red);
    border-color: rgba(204,41,54,0.4);
}

#frmDash .infoCon .metricRow{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
#frmDash .infoCon .metricLabel{
    font-family: 'Inter Tight', sans-serif;
    font-size: 11.5px;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
#frmDash .infoCon .metricValue{
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#frmDash .infoCon .metricNumber{
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--textPrimary);
    line-height: 1;
}
#frmDash .infoCon .metricNumber.primary{
    font-size: 32px;
    color: var(--brown);
}
#frmDash .infoCon.heroTile .metricNumber.primary{
    font-size: 40px;
}
#frmDash .infoCon .metricTrend{
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--textMuted);
}
#frmDash .infoCon .metricTrend.up{ color: var(--green); }
#frmDash .infoCon .metricTrend.down{ color: var(--red); }
#frmDash .infoCon .metricTrend.flat{ color: var(--textMuted); }

/* Backlog tile — no comparisons; equal-weight rows */
#frmDash .infoCon.backlog .metricNumber{
    font-size: 22px;
    color: var(--textPrimary);
}

/* ===========================================================
   .gKpiDetail — Received KPI detail page
   =========================================================== */
.gKpiDetail{
    padding: 20px;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
.gKpiDetail .detailColumns{
    flex: 1;
    min-height: 0;
}
.gKpiDetail .detailHead{
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--cardBorder);
}
.gKpiDetail .btnBack{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    color: var(--textSecondary);
    border: 1px solid var(--cardBorder);
    border-radius: 18px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
}
.gKpiDetail .btnBack:hover{
    border-color: var(--brown);
    color: var(--brown);
}
.gKpiDetail .detailTitle{
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--textPrimary);
}

.gKpiDetail .kpiHero{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.gKpiDetail .kpiHeroItem{
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}
.gKpiDetail .kpiHeroLabel{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--textSecondary);
    margin-bottom: 12px;
}
.gKpiDetail .kpiHeroValue{
    font-family: 'Inter Tight', sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: var(--brown);
    line-height: 1;
    margin-bottom: 8px;
}
.gKpiDetail .kpiHeroTrend{
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--textMuted);
}
.gKpiDetail .kpiHeroTrend.up{ color: var(--green); }
.gKpiDetail .kpiHeroTrend.down{ color: var(--red); }
.gKpiDetail .kpiHeroTrend.flat{ color: var(--textMuted); }

/* ----- 2-column layout for detail pages with side panel ----- */
.gKpiDetail .detailColumns{
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: stretch;
    min-height: 0;
}
.gKpiDetail .detailColLeft{
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.gKpiDetail .detailColRight{
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.gKpiDetail .detailColLeft .gaugeCard,
.gKpiDetail .detailColLeft .chartSection{
    margin-bottom: 0;
}

/* ----- Top row: gauge card + yearly trend card side-by-side ----- */
.gKpiDetail .detailTopRow{
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: stretch;
}
.gKpiDetail .detailTopRow .gaugeCard{ margin-bottom: 0; }

/* ----- Yearly Trend card ----- */
.gKpiDetail .trendCard{
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gKpiDetail .trendForecast{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.gKpiDetail .trendForecastLabel{
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.gKpiDetail .trendForecastValue{
    font-family: 'Inter Tight', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--brown);
    line-height: 1;
}
.gKpiDetail .trendForecastDelta{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 600;
}
.gKpiDetail .trendForecastDelta.up{ color: var(--lightGreen); }
.gKpiDetail .trendForecastDelta.down{ color: var(--red); }
.gKpiDetail .trendForecastDelta.flat{ color: var(--textMuted); }
.gKpiDetail .trendSub{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
    margin-bottom: 16px;
}
.gKpiDetail .trendSub strong{ color: var(--textPrimary); font-weight: 600; }

.gKpiDetail .trendChart{
    position: relative;
    flex: 1;
    min-height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 22px;
    margin-top: auto;
}
.gKpiDetail .trendCol{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    min-width: 0;
}
.gKpiDetail .trendBarWrap{
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: center;
}
.gKpiDetail .trendBar{
    width: 65%;
    background: var(--brown);
    border-radius: 3px 3px 0 0;
    position: relative;
    cursor: default;
    min-height: 2px;
}
.gKpiDetail .trendBar::after{
    content: attr(data-value);
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter Tight', sans-serif;
    font-size: 10.5px;
    color: var(--textPrimary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.gKpiDetail .trendBar:hover::after{ opacity: 1; }
.gKpiDetail .trendBar.forecast{
    background: transparent;
    border: 1.5px dashed var(--textSecondary);
    overflow: hidden;
}
.gKpiDetail .trendBar.forecast::after{
    color: var(--textSecondary);
    font-style: italic;
}
.gKpiDetail .trendBarFill{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brown);
    border-radius: 0 0 1px 1px;
    pointer-events: none;
}
.gKpiDetail .trendColLabel{
    position: absolute;
    bottom: -2px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 10.5px;
    color: var(--textSecondary);
    white-space: nowrap;
}
.gKpiDetail .trendCol.forecast .trendColLabel{
    color: var(--textMuted);
    font-style: italic;
}
.gKpiDetail .trendLineOverlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 22px;
    pointer-events: none;
}
.gKpiDetail .trendLineOverlay svg{
    width: 100%;
    height: 100%;
    overflow: visible;
}
.gKpiDetail .trendLineHist{
    fill: none;
    stroke: var(--brown);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.gKpiDetail .trendLineProj{
    fill: none;
    stroke: var(--brown);
    stroke-width: 2;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.7;
}
.gKpiDetail .trendDot{
    fill: var(--brown);
    stroke: var(--cardBg);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}
.gKpiDetail .trendDot.forecast{
    fill: var(--cardBg);
    stroke: var(--brown);
}
.gKpiDetail .trendLegend{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--textSecondary);
}
.gKpiDetail .trendLegend .swatch{
    display: inline-block;
    width: 12px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}
.gKpiDetail .trendLegend .swatch.hist{ background: var(--brown); }
.gKpiDetail .trendLegend .swatch.proj{
    background: transparent;
    border: 1.5px dashed var(--textSecondary);
}
.gKpiDetail .trendLegend .swatch.line{
    background: transparent;
    border: 0;
    border-top: 2px solid var(--brown);
    height: 0;
    width: 16px;
    position: relative;
    top: -3px;
}

/* ----- Outfitter leaderboard ----- */
.gKpiDetail .leaderboardCard{
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.gKpiDetail .leaderboardList{
    margin-top: 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--cardBorder) var(--cardBg);
}
.gKpiDetail .leaderboardList::-webkit-scrollbar{ width: 8px; }
.gKpiDetail .leaderboardList::-webkit-scrollbar-track{ background: var(--cardBg); }
.gKpiDetail .leaderboardList::-webkit-scrollbar-thumb{
    background: var(--cardBorder);
    border-radius: 4px;
}
.gKpiDetail .leaderboardList::-webkit-scrollbar-thumb:hover{
    background: var(--textSecondary);
}
.gKpiDetail .leaderRow{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 10px;
    transition: border-color 0.15s;
}
.gKpiDetail .leaderRow:hover{ border-color: var(--brown); }
.gKpiDetail .leaderRow.leaderFirst{
    background: rgba(251,183,49,0.06);
    border-color: rgba(251,183,49,0.4);
}
.gKpiDetail .leaderPos{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cardBorder);
    color: var(--textPrimary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.gKpiDetail .leaderRow.leaderFirst .leaderPos{
    background: var(--brown);
    color: var(--darkBrown);
}
.gKpiDetail .leaderName{
    flex: 1;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    color: var(--textPrimary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gKpiDetail .leaderRow.leaderFirst .leaderName{
    color: var(--brown);
    font-weight: 600;
}
.gKpiDetail .leaderTrophies{
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--textPrimary);
    flex-shrink: 0;
}
.gKpiDetail .leaderRow.leaderFirst .leaderTrophies{ color: var(--brown); }

/* ============ Mounting Backlog detail page ============ */
.gMountingBacklog .cardSub{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
    margin-bottom: 18px;
}
.gMountingBacklog .middleRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ----- Pipeline funnel ----- */
.gMountingBacklog .funnelGrid{
    display: grid;
    grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
    align-items: stretch;
    margin-top: 8px;
}
.gMountingBacklog .funnelStage{
    background: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 10px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.gMountingBacklog .funnelStage.completed{
    background: rgba(138,141,106,0.10);
    border-color: rgba(138,141,106,0.45);
}
.gMountingBacklog .funnelArrow{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textMuted);
    font-size: 18px;
    line-height: 1;
}
.gMountingBacklog .funnelLabel{
    font-family: 'Inter Tight', sans-serif;
    font-size: 10.5px;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    font-weight: 500;
}
.gMountingBacklog .funnelValue{
    font-family: 'Inter Tight', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--brown);
    line-height: 1;
}
.gMountingBacklog .funnelStage.completed .funnelValue{ color: var(--lightGreen); }
.gMountingBacklog .funnelUnits{
    font-family: 'Inter Tight', sans-serif;
    font-size: 10.5px;
    color: var(--textMuted);
    margin-top: 4px;
    line-height: 1.3;
}
.gMountingBacklog .funnelTotalRow{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--cardBorder);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
}
.gMountingBacklog .funnelTotalRow strong{ color: var(--textPrimary); font-weight: 600; }

/* ----- Aging breakdown ----- */
.gMountingBacklog .agingList{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.gMountingBacklog .agingRow{
    display: grid;
    grid-template-columns: 90px 1fr 50px;
    align-items: center;
    gap: 12px;
}
.gMountingBacklog .agingLabel{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
}
.gMountingBacklog .agingBarTrack{
    background: var(--inputBg);
    border-radius: 4px;
    height: 22px;
    position: relative;
    overflow: hidden;
}
.gMountingBacklog .agingBarFill{
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}
.gMountingBacklog .agingBarFill.green{ background: var(--green); }
.gMountingBacklog .agingBarFill.yellow{ background: var(--brown); }
.gMountingBacklog .agingBarFill.orange{ background: var(--orange); }
.gMountingBacklog .agingBarFill.red{ background: var(--red); }
.gMountingBacklog .agingBarFill.darkRed{ background: #6B1B1F; }
.gMountingBacklog .agingCount{
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: var(--textPrimary);
}
.gMountingBacklog .agingFooter{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--cardBorder);
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
}
.gMountingBacklog .agingFooter strong{ color: var(--red); font-weight: 600; }

/* ----- Burn-down forecast ----- */
.gMountingBacklog .burnHeadline{
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.gMountingBacklog .burnValue{
    margin-top: 2px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brown);
    line-height: 1.1;
}
.gMountingBacklog .burnSub{
    margin-top: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
    line-height: 1.5;
}
.gMountingBacklog .burnSub strong{ color: var(--textPrimary); font-weight: 600; }
.gMountingBacklog .burnMeter{
    margin-top: auto;
    padding-top: 18px;
}
.gMountingBacklog .burnMeterTrack{
    background: var(--inputBg);
    border-radius: 6px;
    height: 22px;
    overflow: hidden;
    border: 1px solid var(--cardBorder);
}
.gMountingBacklog .burnMeterFill{
    height: 100%;
    background: linear-gradient(90deg, var(--brown), var(--lightYellow));
}
.gMountingBacklog .burnMeterScale{
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    font-family: 'Inter Tight', sans-serif;
    font-size: 10.5px;
    color: var(--textMuted);
}
.gMountingBacklog .burnRate{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--cardBorder);
    font-family: 'Inter Tight', sans-serif;
    font-size: 11.5px;
    color: var(--textSecondary);
}
.gMountingBacklog .burnRate strong{ color: var(--textPrimary); font-weight: 600; }
.gKpiDetail .leaderEmpty{
    text-align: center;
    color: var(--textMuted);
    font-size: 13px;
    padding: 24px 12px;
}

/* ----- Annual target gauge ----- */
.gKpiDetail .gaugeCard{
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.gKpiDetail .gaugeWrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4px;
}
.gKpiDetail .gaugeSvg{
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
}
.gKpiDetail .gaugeFooter{
    width: 100%;
    max-width: 300px;
    margin-top: 6px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textPrimary);
}
.gKpiDetail .gaugeFooterRow{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--cardBorder);
}
.gKpiDetail .gaugeFooterRow:last-child{ border-bottom: none; }
.gKpiDetail .gaugeFooterRow strong{
    margin-left: auto;
    font-weight: 700;
    color: var(--brown);
}
.gKpiDetail .gaugeDot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.gKpiDetail .gaugeDotNow{ background-color: var(--brown); }
.gKpiDetail .gaugeDotLast{
    background-color: transparent;
    border: 2px solid var(--textSecondary);
}

.gKpiDetail .chartSection{
    background: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 12px;
    padding: 24px;
}
.gKpiDetail .chartHead{
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--textPrimary);
    margin-bottom: 8px;
}
.gKpiDetail .chartLegend{
    display: flex;
    gap: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--textSecondary);
    margin-bottom: 16px;
}
.gKpiDetail .legendDot{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}
.gKpiDetail .legendDotThis{ background: var(--brown); }
.gKpiDetail .legendDotLast{ background: var(--textSecondary); }
.gKpiDetail .legendDash{
    display: inline-block;
    width: 18px;
    height: 0;
    margin-right: 6px;
    vertical-align: middle;
    border-top: 2px dashed var(--avgLine);
    position: relative;
    top: -3px;
}
.gKpiDetail .chartAvgOverlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 32px;
    pointer-events: none;
}
.gKpiDetail .chartAvgOverlay svg{
    width: 100%;
    height: 100%;
    overflow: visible;
}
.gKpiDetail .chartAvgLine{
    fill: none;
    stroke: var(--avgLine);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.gKpiDetail .chartAvgDot{
    fill: var(--avgLine);
    stroke: var(--cardBg);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}
.gKpiDetail .chartBars{
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 240px;
    padding-bottom: 32px;
    position: relative;
}
.gKpiDetail .chartMonth{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}
.gKpiDetail .chartBarPair{
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    justify-content: center;
}
.gKpiDetail .chartBar{
    width: 40%;
    border-radius: 4px 4px 0 0;
    position: relative;
    cursor: pointer;
    transition: opacity 0.15s;
}
.gKpiDetail .chartBar:hover{
    opacity: 0.85;
}
.gKpiDetail .chartBar::after{
    content: attr(data-value);
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--textPrimary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.gKpiDetail .chartBar:hover::after{
    opacity: 1;
}
.gKpiDetail .chartBarThis{
    background: var(--brown);
}
.gKpiDetail .chartBarLast{
    background: var(--textSecondary);
    opacity: 0.6;
}
.gKpiDetail .chartMonthLabel{
    position: absolute;
    bottom: -24px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    color: var(--textSecondary);
}

/* ----- Period drill-down table header (kept structurally) ----- */
#frmDash .rightHeaderCon{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cardBorder);
    color: var(--textPrimary);
}
#frmDash #frmDashLblReportName{
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--textPrimary);
}
#frmDash .rightHeaderCon .dataRange{
    position: relative;
    top: 35px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    border-radius: 7px;
    background-color: var(--lightBrown);
    padding: 5px;
    border: 1px solid var(--darkBrown);
    border-radius: 5px;
}
#frmDash .rightHeaderCon .dataRange label{
    display: flex;
    align-items: center;
    color: var(--darkBrown);
    margin-left: 20px;
    font-size: 40%;
}
#frmDash .rightHeaderCon .dataRange .frmDashInput{
    padding: 5px;
    border-radius: 7px;
    margin-left: 5px;
    font-family: 'roboto', sans-serif;
}


#frmDash .detMatrixCon{
    border-radius: 7px;
    padding: 10px;
    margin: 10px;
    min-width: 46%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}
#frmDash .detMatrixCon h1{
    text-align: left;
    font-size: 150%;
    padding: 10px;
    color: var(--darkBrown);
    font-weight: bold;
    border-bottom: 1px solid var(--lightBrown)
}
#frmDash .detMatrixCon h2{
    text-align: left;
    font-size: 120%;
    padding: 15px 10px 8px 10px;
    color: var(--darkBrown);
    font-weight: bold;
}
#frmDash .detMatrixCon .gMtxTbl{
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px grey;
}
#frmDash .detMatrixCon .gMtxTbl thead tr{
    background-color: var(--darkBrown);
    color: var(--white);
    text-align: left;
    font-weight: bold;
}
#frmDash .detMatrixCon .gMtxTbl td,
#frmDash .detMatrixCon .gMtxTbl th{
    padding: 12px 15px;
}
#frmDash .detMatrixCon .gMtxTbl tr{
    border-bottom: 1px solid var(--brown);
}
#frmDash .detMatrixCon .gMtxTbl tr:nth-of-type(even){
    background-color: var(--lightBrown);
}
#frmDash .detMatrixCon .gMtxTbl tr:last-of-type{
    border-bottom: 2px Solid var(--darkBrown);
}



#frmDash .matrixConclCon{
    width: 100%;
    background-color: var(--lightBrown);
    border-radius: 7px;
    margin: 10px;
    padding: 10Px;
}
#frmDash .matrixConclCon h2{
    text-align: left;
    padding: 10px;
    color: var(--darkBrown);
    font-weight: bold;
    border-bottom: 1px solid var(--white);
    margin-bottom: 10px;
}
#frmDash .matrixConclCon .conclItemCon{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
    margin-top: 5px;
}
#frmDash .matrixConclCon .conclDis{
    color: var(--darkBrown);
}
#frmDash .matrixConclCon .conclItemCon .conclMatrix{
    padding: 10px;
    width: 10%;
    text-align: center;
    background-color: var(--white);
    border-radius: 7px;
    margin-left: 10px;
}
#frmDash .matrixConclCon .conclAnsCon{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
    margin-top: 5px;
}
#frmDash .matrixConclCon .conclAnsCon .conclMatrix{
    padding: 10px;
    width: 10%;
    text-align: center;
    background-color: var(--green);
    color: var(--white);
    border-radius: 7px;
    margin-left: 10px;
}

#frmDash .avgMatrixCon{
    width: 100%;
    background-color: var(--lightBrown);
    border-radius: 7px;
    margin: 10px;
    padding: 10Px;
}
#frmDash .avgMatrixCon .gDashAveItem{
    display: flex;
    flex-flow: row;
    align-content: stretch;
}
#frmDash .avgMatrixCon h2{
    text-align: left;
    padding: 10px;
    color: var(--darkBrown);
    font-weight: bold;
    border-bottom: 1px solid var(--white);
    margin-bottom: 10px;
}
#frmDash .avgMatrixCon .gDashAveCon{
    background-color: var(--white);
    padding: 10px;
    border-radius: 7px;
    box-shadow: 1px 1px 3px grey;
    border: solid 2px var(--darkBrown);
    margin: 10px;
    flex-grow: 1;
}
#frmDash .avgMatrixCon .gDashAveCon .gMatConHead{
    margin-top: 10px;
}

#frmDash .js_ChartsCon canvas{
    margin-bottom: 30px;
}
#frmDash .js_ChartsCon div{
    margin-bottom: 30px;
}


/*FORM SALES DASH*/
#frmSDash .mainFrmCon{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  align-items: center;
  position: relative;
}

#frmSDash h1{
  width: 90%;
  border-bottom: 1px solid var(--darkBrown);
  margin: 35px 0 10px 0;
}
#frmSDash h2{
  margin: 35px 0 10px 0;
}







#frmSDash .monthComCon {
    width: 90%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}
#frmSDash .monthComCon select {
    padding: 8px 10px;
    margin-left: 0;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    width: 7vw;
    background-color: #ffffff;
    color: #495057;
}
#frmSDash .monthComCon table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
#frmSDash .monthComCon thead {
    background-color: var(--darkBrown);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#frmSDash .monthComCon th {
    padding: 15px 1vw;
    text-align: center;
    font-size: 16px;
    color: var(--lightBrown);
    border-bottom: 1px solid #dee2e6;
} 
#frmSDash .monthComCon td {
    padding: 15px 1vw;
    text-align: center;
    font-size: 16px;
    color: var(--brownShadow);
    border-bottom: 1px solid #dee2e6;
}
#frmSDash .monthComCon th {
    font-weight: 600;
}
#frmSDash .monthComCon tbody tr:hover {
    background-color: #f1f3f5;
}
#frmSDash .monthComCon td {
    background-color: #ffffff;
}
#frmSDash .monthComCon tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
#frmSDash .monthComTCon {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 30%;
    padding: 15px 1.5vw;
    background-color: var(--darkBrown);
    color: var(--lightBrown);
    border-radius: 8px;
    margin: 10px 0;
}
#frmSDash .monthComTCon span {
    font-size: 16px;
}
#frmSDash .monthComTCon .monthPayTCAmount {
    font-weight: 600;
}







#frmSDash .monthPayCon {
    width: 90%;
    display: flex;
    flex-flow: column nowrap;
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#frmSDash .monthPayCon select {
    padding: 8px 10px;
    margin-left: 0;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    width: 7vw;
    background-color: #ffffff;
    color: #495057;
}
#frmSDash .monthPayCon table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
#frmSDash .monthPayCon thead {
    background-color: var(--darkBrown);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#frmSDash .monthPayCon th {
    padding: 15px 1vw;
    text-align: center;
    font-size: 16px;
    color: var(--lightBrown);
    border-bottom: 1px solid #dee2e6;
} 
#frmSDash .monthPayCon td {
    padding: 15px 1vw;
    text-align: center;
    font-size: 16px;
    color: var(--brownShadow);
    border-bottom: 1px solid #dee2e6;
}
#frmSDash .monthPayCon th {
    font-weight: 600;
}
#frmSDash .monthPayCon tbody tr:hover {
    background-color: #f1f3f5;
}
#frmSDash .monthPayCon td {
    background-color: #ffffff;
}
#frmSDash .monthPayCon tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
#frmSDash .monthPayTCon {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 30%;
    padding: 15px 1.5vw;
    background-color: var(--darkBrown);
    color: var(--lightBrown);
    border-radius: 8px;
    margin: 10px 0;
}
#frmSDash .monthPayTCon span {
    font-size: 16px;
}
#frmSDash .monthPayTCon .monthPayTCAmount {
    font-weight: 600;
}






#frmDash .dashGraphs{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#frmDash #frmDashRightGraph .infoCon{
  width: 47%;
}
#frmDash .graphCon{
  width: 100%;
  position: relative;
  margin-top: 10px;
}
#frmDash .graphRowCon{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
#frmDash .graphRowDisc{
  width: 15%;
  font-size: 70%;
}
#frmDash .graphRowContent{
  width: 85%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#frmDash .graphConHead{
  font-weight: bold;
  color: var(--darkBrown);
  margin-bottom: 3px;
}
#frmDash .graphTargetCon{
  display: flex;
  flex-flow: row nowrap;
}
#frmDash .graphTargetCon span{
  padding: 0 0.2vw;
}
#frmDash .graphTargetFrame{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}
#frmDash .graphThisM{
  display: inline-block;
  background-color: var(--green);
  color: var(--white);
  padding: 3px 0.3vw;
  transition: width 1s;
  width: 50%;
}
#frmDash .graphLastPartM{
  display: inline-block;
  background-color: var(--lightGreen);
  transition: width 1s;
  width: 0px;
}

#frmDash .graphLastM{
  font-size: 60%;
  background-color: var(--red);
  color: var(--white);
  padding: 3px 0.3vw;
  transition: width 1s;
}
#frmSDash .salesBookCon{
  width: 90%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 20px 0;
}
#frmSDash .frmSDashItem{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 7px;
  border: 1px solid var(--darkBrown);
  padding: 15px 2vw;
}
#frmSDash .frmSDashItem .frmSDashItemHead{
  color: var(--green);
  font-size: 150%;
  font-weight: bold;
}

/*FORM MY DASH*/
#frmMyDash .mainFrmCon{
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    position: relative;
  }
  
  #frmMyDash h1{
    width: 90%;
    border-bottom: 1px solid var(--darkBrown);
    margin: 35px 0 10px 0;
  }
  #frmMyDash h2{
    margin: 35px 0 10px 0;
  }
  
  #frmMyDash .monthPayCon{
    width: 90%;
    display: flex;
    flex-flow: column nowrap;
    margin: 20px 0;
    overflow-y: auto;
  }
  #frmMyDash .monthPayCon select{
    padding: 5px 0.3vw;
    margin-left: 0;
    width: 5vw;
  }
  #frmMyDash .monthPayCon table{
    border-radius: 7px;
    border: 1px solid var(--darkBrown);
  }
  #frmMyDash .monthPayCon thead{
    background-color: var(--darkBrown);
    color: var(--white);
  }
  #frmMyDash .monthPayCon th{
    padding: 10px 0.5vw;
  }
  #frmMyDash .monthPayCon td{
    text-align: center;
    padding: 10px 0.5vw;
  }
  #frmMyDash .monthPayTCon{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 20%;
    padding: 10px 0.8vw;
    background-color: var(--darkBrown);
    color: var(--white);
  }
  #frmMyDash .container {
    width: 100%;
    margin: auto;
    overflow: hidden;
    
  }
  #frmMyDash .content-box {
    background: #fff;
    padding: 1px 35px 35px 35px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  #frmMyDash .header {
    margin-bottom: 10px;
  }
  #frmMyDash .comBold{
    font-weight: bolder;
    margin-top: 5px;
    font-size: 14px;
    text-decoration: underline;
  }

  
  #frmDash .dashGraphs{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  #frmDash #frmDashRightGraph .infoCon{
    width: 47%;
  }
  #frmDash .graphCon{
    width: 100%;
    position: relative;
    margin-top: 10px;
  }
  #frmDash .graphRowCon{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
  }
  #frmDash .graphRowDisc{
    width: 15%;
    font-size: 70%;
  }
  #frmDash .graphRowContent{
    width: 85%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  #frmDash .graphConHead{
    font-weight: bold;
    color: var(--darkBrown);
    margin-bottom: 3px;
  }
  #frmDash .graphTargetCon{
    display: flex;
    flex-flow: row nowrap;
  }
  #frmDash .graphTargetCon span{
    padding: 0 0.2vw;
  }
  #frmDash .graphTargetFrame{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
  }
  #frmDash .graphThisM{
    display: inline-block;
    background-color: var(--green);
    color: var(--white);
    padding: 3px 0.3vw;
    transition: width 1s;
    width: 50%;
  }
  #frmDash .graphLastPartM{
    display: inline-block;
    background-color: var(--lightGreen);
    transition: width 1s;
    width: 0px;
  }
  
  #frmDash .graphLastM{
    font-size: 60%;
    background-color: var(--red);
    color: var(--white);
    padding: 3px 0.3vw;
    transition: width 1s;
  }
  #frmMyDash .salesBookCon{
    width: 90%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 20px 0;
  }
  #frmMyDash .frmSDashItem{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: 7px;
    border: 1px solid var(--darkBrown);
    padding: 15px 2vw;
  }
  #frmMyDash .frmSDashItem .frmSDashItemHead{
    color: var(--green);
    font-size: 150%;
    font-weight: bold;
  }

/*FORM SEARCH*/
#frmSearch{
    border-radius: none;
    box-shadow: none;
    padding: 0px 5px 0px 5px;
}
#frmSearch .topCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 4px 4px;
    gap: 16px;
}
#frmSearch .topCon .topConTitle{
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--textPrimary);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1;
}
#frmSearch .topCon .btnAddCon{
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}
#frmSearch .topCon .btnAddCon > div{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px 7px 12px;
    background: var(--brown);
    color: var(--darkBrown);
    border: 1px solid var(--brown);
    border-radius: 18px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
#frmSearch .topCon .btnAddCon > div:hover{
    background: var(--lightYellow);
    border-color: var(--lightYellow);
}
#frmSearch .topCon .btnAddCon > div:active{
    transform: translateY(1px);
}
#frmSearch .topCon .btnAddCon .btnAddIco{
    width: 14px;
    height: 14px;
    filter: brightness(0);
    flex-shrink: 0;
}
#frmSearch .topCon .rightCon{}

#frmSearch .filterBtnCon{
    width: 100%;
    margin: 12px 0;
}
#frmSearch .filterBtnCon ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}
#frmSearch .filterBtnCon li{
    display: inline-block;
    padding: 7px 14px;
    background: transparent;
    color: var(--textSecondary);
    border: 1px solid var(--cardBorder);
    border-radius: 18px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
}
#frmSearch .filterBtnCon li:hover{
    border-color: var(--brown);
    color: var(--textPrimary);
}
#frmSearch .filterBtnCon li.selected{
    background: var(--brown);
    color: var(--darkBrown);
    border-color: var(--brown);
    font-weight: 600;
}
#frmSearch .filterBtnCon li.gPayPlanDis{
    opacity: 0.5;
    cursor: not-allowed;
}

#frmSearch .filterRibbon{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: transparent;
    border-bottom: 1px solid var(--cardBorder);
    flex-wrap: wrap;
}
#frmSearch .filterRibbon .searchWrap{
    position: relative;
    display: flex;
    align-items: center;
}
#frmSearch .filterRibbon .searchWrap .searchIco{
    position: absolute;
    left: 9px;
    width: 13px;
    height: 13px;
    color: var(--textMuted);
    pointer-events: none;
}
#frmSearch .filterRibbon .txtSearch{
    outline: none;
    display: inline-block;
    height: 28px;
    width: 180px;
    margin: 0;
    border: 1px solid var(--cardBorder);
    background-color: var(--inputBg);
    color: var(--textPrimary);
    padding: 0 10px 0 28px;
    font-size: 12.5px;
    border-radius: 14px;
    font-family: 'Inter Tight', sans-serif;
    box-shadow: none;
}
#frmSearch .filterRibbon .txtSearch::placeholder{
    color: var(--textMuted);
}
#frmSearch .filterRibbon .secondFilterSelect{
    display: inline-block;
    height: 28px;
    width: auto;
    margin: 0;
    background-color: var(--inputBg);
    color: var(--textPrimary);
    border: 1px solid var(--cardBorder);
    padding: 0 28px 0 12px;
    font-size: 12.5px;
    border-radius: 14px;
    font-family: 'Inter Tight', sans-serif;
    cursor: pointer;
    box-shadow: none;
}
#frmSearch .filterRibbon .customFilters{
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
    align-items: center;
}
#frmSearch .filterRibbon .showDelToggle{
    position: relative;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--cardBorder);
    color: var(--textSecondary);
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s, color 0.15s;
}
#frmSearch .filterRibbon .showDelToggle::after{
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 5px 9px;
    background: var(--darkBrown);
    color: var(--textPrimary);
    border: 1px solid var(--cardBorder);
    border-radius: 6px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease 0.2s;
    z-index: 10;
}
#frmSearch .filterRibbon .showDelToggle:hover::after{
    opacity: 1;
}
#frmSearch .filterRibbon .showDelToggle svg{
    width: 14px;
    height: 14px;
}
#frmSearch .filterRibbon .showDelToggle:hover{
    color: var(--textPrimary);
}
#frmSearch .filterRibbon .showDelToggle:has(input:checked){
    border-color: var(--brown);
    color: var(--brown);
}
#frmSearch .filterRibbon .showDelToggle .visuallyHidden{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
#frmSearch .customFilters .filterCon{
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
    align-items: center;
}
#frmSearch .filterCon .filterBtn,
#frmSearch .filterCon .selectable{
    padding: 5px 11px;
    border: 1px solid var(--cardBorder);
    border-radius: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--textSecondary);
    background: transparent;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
}
#frmSearch .filterCon .filterBtn:hover,
#frmSearch .filterCon .selectable:hover{
    border-color: var(--brown);
    color: var(--textPrimary);
}
#frmSearch .filterCon .filterBtn.selected,
#frmSearch .filterCon .selectable.selected{
    background: var(--brown);
    color: var(--darkBrown);
    border-color: var(--brown);
    font-weight: 600;
}
#frmSearch .filterCon select{
    display: inline-block;
    height: 28px;
    width: auto;
    margin: 0;
    background-color: var(--inputBg);
    color: var(--textPrimary);
    border: 1px solid var(--cardBorder);
    padding: 0 28px 0 12px;
    font-size: 12px;
    border-radius: 14px;
    font-family: 'Inter Tight', sans-serif;
    cursor: pointer;
    box-shadow: none;
}
/* Hidden native select kept in DOM for thisForm.name.value compatibility */
.gDropdownHidden{
    display: none !important;
}
/* ============================================================
   gDropdown — custom dropdown, styled to match .contactList
   ============================================================ */
.gDropdown{
    position: relative;
    display: inline-block;
    font-family: 'Inter Tight', sans-serif;
}
.gDropdownTrigger{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 8px 0 12px;
    background: var(--inputBg);
    color: var(--textPrimary);
    border: 1px solid var(--cardBorder);
    border-radius: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
}
.gDropdownTrigger:hover{
    border-color: var(--brown);
    color: var(--brown);
}
.gDropdown[data-state="open"] > .gDropdownTrigger{
    border-color: var(--brown);
    color: var(--brown);
}
.gDropdownLabel{
    white-space: nowrap;
}
.gDropdownCaret{
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.gDropdown[data-state="open"] .gDropdownCaret{
    transform: rotate(180deg);
}
.gDropdownMenu{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 0;
    overflow: hidden;
    background-color: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 8px;
    z-index: 50;
    color: var(--textPrimary);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.gDropdownItem{
    padding: 8px 18px 8px 14px;
    text-align: left;
    border-left: 3px solid transparent;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--textPrimary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s, border-left-color 0.15s, padding-left 0.15s;
}
.gDropdownItem:hover{
    color: var(--brown);
    background-color: rgba(251,183,49,0.06);
    border-left-color: var(--brown);
    padding-left: 18px;
}
.gDropdownItem.selected{
    color: var(--brown);
    border-left-color: var(--brown);
    font-weight: 600;
}
#frmSearch .selBar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    background: rgba(204,41,54,0.08);
    border-bottom: 1px solid var(--cardBorder);
    font-size: 12px;
    color: var(--textPrimary);
    font-family: 'Inter Tight', sans-serif;
}
#frmSearch .selBar .selBarLeft strong{
    font-weight: 600;
}
#frmSearch .selBar .selBarDel{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--red);
    padding: 4px 10px;
    border: 1px solid var(--red);
    border-radius: 12px;
    cursor: pointer;
    font-size: 11.5px;
    background: transparent;
    font-family: 'Inter Tight', sans-serif;
}
#frmSearch .selBar .selBarDel:hover{
    background: rgba(204,41,54,0.12);
}
#frmSearch .selBar .selBarDel svg{
    width: 12px;
    height: 12px;
}



#frmSearch .tblSectionCon{
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid var(--cardBorder);
    border-radius: 10px;
    background-color: var(--white);
    height: 100%;
    overflow: hidden;
    position: relative;
}
#frmSearch .bulkEditCon{
  position: absolute;
  overflow-x: hidden;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--lightBrown);
  border-left: 1px solid var(--cardBorder);
  width: 0px;
  z-index: 2;
  box-shadow: -8px 0 24px rgba(0,0,0,0.45);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#frmSearch .bulkEditHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--cardBg);
  border-bottom: 1px solid var(--cardBorder);
  padding: 12px 16px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--textPrimary);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
#frmSearch .bulkEditHead img{
  width: 14px;
  height: 14px;
  cursor: pointer;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  transition: opacity 0.15s;
}
#frmSearch .bulkEditHead img:hover{
  opacity: 1;
}

#frmSearch .bulkEditBody{
  overflow-y: auto;
  padding: 14px 16px;
  position: absolute;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 56px;
  scrollbar-width: thin;
  scrollbar-color: var(--cardBorder) var(--lightBrown);
}
#frmSearch .bulkEditBody::-webkit-scrollbar{
  width: 8px;
}
#frmSearch .bulkEditBody::-webkit-scrollbar-track{
  background: var(--lightBrown);
}
#frmSearch .bulkEditBody::-webkit-scrollbar-thumb{
  background: var(--cardBorder);
  border-radius: 4px;
}
#frmSearch .bulkEditBody::-webkit-scrollbar-thumb:hover{
  background: var(--textSecondary);
}

#frmSearch .bulkEditFoot{
  display: flex;
  position: absolute;
  background-color: var(--lightBrown);
  border-top: 1px solid var(--cardBorder);
  bottom: 0;
  right: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}
#frmSearch .bulkEditFoot .gBtnSave{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brown);
  color: var(--darkBrown);
  border: 1px solid var(--brown);
  border-radius: 18px;
  padding: 7px 18px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  user-select: none;
}
#frmSearch .bulkEditFoot .gBtnSave:hover{
  background: var(--lightYellow);
  border-color: var(--lightYellow);
}
#frmSearch .bulkEditFoot .gBtnSave:active{
  transform: translateY(1px);
}

#frmSearch .searchTblCon{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--white);
    scrollbar-width: thin;
    scrollbar-color: var(--cardBorder) var(--white);
}
#frmSearch .searchTblCon::-webkit-scrollbar{
    width: 8px;
}
#frmSearch .searchTblCon::-webkit-scrollbar-track{
    background: var(--white);
}
#frmSearch .searchTblCon::-webkit-scrollbar-thumb{
    background: var(--cardBorder);
    border-radius: 4px;
}
#frmSearch .searchTblCon::-webkit-scrollbar-thumb:hover{
    background: var(--textSecondary);
}
#frmSearch .searchTbl{
    width: 100%;
    position: relative;
    border-collapse: collapse;
    font-size: 13.5px;
}
#frmSearch .searchTbl.hideChk tr td:nth-child(1){
    display: none;
}
#frmSearch .searchTbl.hideChk tr th:nth-child(1){
    display: none;
}

#frmSearch .searchTbl .tblCheckBox{
    position: relative;
    z-index: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--cardBorder);
    border-radius: 3px;
    cursor: pointer;
}
#frmSearch .searchTbl thead th{
    padding: 12px 16px;
    cursor: pointer;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--textSecondary);
    text-align: left;
    font-size: 11px;
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 1;
    border-bottom: 1px solid var(--cardBorder);
    user-select: none;
}
#frmSearch .searchTbl thead th:hover{
    color: var(--textPrimary);
}

#frmSearch .searchTbl tbody td{
    padding: 11px 16px;
    color: var(--textPrimary);
    vertical-align: middle;
    border-bottom: 1px solid #1a1a1a;
}
#frmSearch .searchTbl tbody tr:nth-child(even){
    background-color: var(--lightBrown);
}
#frmSearch .searchTbl tbody tr:hover{
    background-color: #2c2c2c;
    cursor: pointer;
}
#frmSearch .searchTbl tbody tr[data-chkBox="true"]{
    background-color: #2a2620;
    box-shadow: inset 3px 0 0 var(--brown);
}
#frmSearch .searchTbl tbody tr[data-chkBox="true"]:hover{
    background-color: #2f291f;
}

#frmSearch .tblSectionShow{
  background-color: var(--lightBrown);
  padding: 10px 18px;
  border-top: 1px solid var(--cardBorder);
  color: var(--textSecondary);
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#frmSearch .tblSectionShow label{
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  height: 28px;
}
#frmSearch .tblSectionShow label span{
  display: inline-flex;
  align-items: center;
  height: 100%;
}
#frmSearch .tblSectionShow #frmSearchLblCount{
  line-height: 1;
}
#frmSearch .tblSectionShow select{
  height: 28px;
  background-color: var(--inputBg);
  color: var(--textPrimary);
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  padding: 0 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
}
#frmSearch .tblSectionShow #frmSearchLblCount{
  color: var(--textSecondary);
  font-weight: normal;
}
#frmSearch .tblSectionShow #frmSearchLblCount strong{
  color: var(--brown);
  font-weight: 600;
}

/* ---------------- table-cell utility classes (Phase B uses these) ---------------- */
#frmSearch .searchTbl .statePill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
#frmSearch .searchTbl .statePill::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
#frmSearch .searchTbl .pill-tagging    { color: var(--textSecondary); background: rgba(136,136,136,0.12); }
#frmSearch .searchTbl .pill-quoting    { color: #E58E26;              background: rgba(229,142,38,0.14); }
#frmSearch .searchTbl .pill-needDep    { color: var(--red);           background: rgba(204,41,54,0.14); }
#frmSearch .searchTbl .pill-depPaid    { color: var(--green);         background: rgba(114,117,82,0.18); }
#frmSearch .searchTbl .pill-inProcess  { color: var(--brown);         background: rgba(251,183,49,0.14); }
#frmSearch .searchTbl .pill-finalising { color: #E58E26;              background: rgba(229,142,38,0.14); }
#frmSearch .searchTbl .pill-dispatching{ color: var(--green);         background: rgba(114,117,82,0.18); }
#frmSearch .searchTbl .pill-shipping   { color: #13B5EA;              background: rgba(19,181,234,0.12); }
#frmSearch .searchTbl .pill-complete   { color: var(--green);         background: rgba(107,142,35,0.22); }
#frmSearch .searchTbl .pill-active     { color: var(--green);         background: rgba(107,142,35,0.22); }
#frmSearch .searchTbl .pill-inactive   { color: var(--textMuted);     background: rgba(106,106,106,0.18); }
#frmSearch .searchTbl .pill-deleted    { color: var(--red);           background: rgba(204,41,54,0.14); }

/* entity-icon column (e.g. RoR id with folder badge) */
#frmSearch .searchTbl td.rorIdCell{
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
#frmSearch .searchTbl td.rorIdCell .entityIco{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(251,183,49,0.12);
  margin-right: 10px;
  vertical-align: middle;
}
#frmSearch .searchTbl td.rorIdCell .entityIco img{
  width: 16px;
  height: 16px;
}

/* secondary cell color (e.g. HO under client) */
#frmSearch .searchTbl td.secondary{
  color: var(--textSecondary);
}
/* primary cell color (default, but explicit) */
#frmSearch .searchTbl td.primaryName{
  color: var(--textPrimary);
  font-weight: 500;
}
/* empty / missing cell */
#frmSearch .searchTbl .empty{
  color: var(--textMuted);
}

/*FORM VIEWS*/
#frmViews{
    border-radius: none;
    box-shadow: none;
    overflow: hidden;
}
#frmViews .mainCon{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    overflow: hidden;
}
#frmViews .mainHeaderCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin: 1vw 0.5vw 0vw 0.5vw;
    cursor: pointer;
}
#frmViews .mainHeaderCon div{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmViews .mainHeaderCon img{
    height: 2vw;
    max-height: 30px;
    margin-left: 1vw;
}

/* ════════════════════════════════════════════════════════════════
   mainDescCon — the header banner at the top of every frmViews profile
   ════════════════════════════════════════════════════════════════ */

#frmViews .mainDescCon{
    padding: 18px 22px;
    background-color: var(--cardBg);
    margin: 14px 16px 0 16px;
    border: 1px solid var(--cardBorder);
    border-left: 6px solid transparent;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    position: relative;
    transition: border-left-color 0.25s, background-image 0.25s;
    box-sizing: border-box;
}

/* State modifier classes — thicker left-border accent + subtle full-banner
   tint + small inline badge near title. The tint is applied as a translucent
   background-image overlay so the underlying --cardBg stays intact. */
#frmViews .rorLost{
    border-left-color: var(--red);
    background-image: linear-gradient(rgba(204,41,54,0.10), rgba(204,41,54,0.10));
}
#frmViews .rorHold{
    border-left-color: var(--yellow);
    background-image: linear-gradient(rgba(251,183,49,0.08), rgba(251,183,49,0.08));
}
#frmViews .rorComplete{
    border-left-color: var(--green);
    background-image: linear-gradient(rgba(138,141,106,0.12), rgba(138,141,106,0.12));
}

#frmViews .rorLost .mainDesc::after,
#frmViews .rorHold .mainDesc::after,
#frmViews .rorComplete .mainDesc::after{
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding: 3px 11px;
    border-radius: 999px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--trueWhite);
    line-height: 1.4;
}
#frmViews .rorLost .mainDesc::after{ content: "LOST"; background-color: var(--red); }
#frmViews .rorHold .mainDesc::after{ content: "ON HOLD"; background-color: var(--yellow); color: var(--darkBrown); }
#frmViews .rorComplete .mainDesc::after{ content: "COMPLETE"; background-color: var(--green); }

/* Header row — icon + name on left, action buttons in middle, status on right */
#frmViews .mainDescHead{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 10px 14px;
}
#frmViews .mainDescCon .mainDesc{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    min-width: 150px;
    gap: 12px;
}
#frmViews .mainDescCon .viewTypeIcon{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}
#frmViews .mainDescCon .viewTypeIcon .typeText{
    font-size: 150%;
    color: var(--trueWhite);
}
#frmViews #frmVlblMainDesc{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--brown);
    letter-spacing: 0.3px;
    line-height: 1.1;
}

/* Status block on far right of header */
#frmViews .mainDescCon .statusCon{
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    font-weight: normal;
}
#frmViews .mainDescCon .statusCon .lblStatusDesc{
    color: var(--textSecondary);
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
#frmViews .mainDescCon .statusCon #frmVlblStatus{
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.05);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    /* text colour comes from JS inline style (green/red/yellow per status) */
}

/* Custom buttons section (Xero etc) + RoR action buttons (Lost/Hold/Complete) */
#frmViews .mainDescCon .rorViewBtnCon{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}
#frmViews .mainDescCon .rorLostBtn,
#frmViews .mainDescCon .rorHoldBtn,
#frmViews .mainDescCon .rorCompleteBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 7px 16px;
    width: auto;
    border-radius: 999px;
    background-color: transparent;
    margin: 0;
    cursor: pointer;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
#frmViews .mainDescCon .rorLostBtn{ color: var(--red); border: 1px solid var(--red); }
#frmViews .mainDescCon .rorHoldBtn{ color: var(--yellow); border: 1px solid var(--yellow); }
#frmViews .mainDescCon .rorCompleteBtn{ color: var(--green); border: 1px solid var(--green); }
#frmViews .mainDescCon .rorLostBtn:hover,
#frmViews .mainDescCon .rorLostBtn.selected{ background-color: var(--red); color: var(--trueWhite); }
#frmViews .mainDescCon .rorHoldBtn:hover,
#frmViews .mainDescCon .rorHoldBtn.selected{ background-color: var(--yellow); color: var(--darkBrown); }
#frmViews .mainDescCon .rorCompleteBtn:hover,
#frmViews .mainDescCon .rorCompleteBtn.selected{ background-color: var(--green); color: var(--trueWhite); }

#frmViews .mainDescCon .xeroBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    color: var(--textPrimary);
    background-color: transparent;
    border: 1px solid var(--cardBorder);
    margin: 0;
    cursor: pointer;
    gap: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: border-color 0.2s, color 0.2s;
}
#frmViews .mainDescCon .xeroBtn:hover{
    border-color: var(--brown);
    color: var(--brown);
}
#frmViews .mainDescCon .xeroBtn img{
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
}

/* Lost / Hold reason chips */
#frmViews .rorLostReas,
#frmViews .rorHoldReas{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: 'Inter Tight', sans-serif;
}
#frmViews .rorLostReas{
    background-color: rgba(204,41,54,0.12);
    border: 1px solid var(--red);
}
#frmViews .rorHoldReas{
    background-color: rgba(251,183,49,0.12);
    border: 1px solid var(--yellow);
}
#frmViews .rorLostReas img,
#frmViews .rorHoldReas img{
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
#frmViews .rorLostReas h3,
#frmViews .rorHoldReas h3{
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    line-height: 1.4;
}
#frmViews .rorLostReas h3{ color: var(--red); }
#frmViews .rorHoldReas h3{ color: var(--yellow); }
#frmViews .rorLostReas span,
#frmViews .rorHoldReas span{
    color: var(--textPrimary);
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

/* Progress bar — responsive stepper. A single horizontal line spans the container;
   items spread across with justify-content: space-between, and each item's
   background covers the line where it sits, creating clean "punch-through" pills. */
#frmViews .mainDescCon .mainDescProgressBar{
    background-color: transparent;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding: 6px 0;
    overflow: visible;
    border: none;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    gap: 0;
}
/* The connecting line across the whole bar */
#frmViews .mainDescCon .mainDescProgressBar::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    right: 14px;
    height: 2px;
    background-color: var(--cardBorder);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}
#frmViews .mainDescCon .ProgressBarItem{
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7px 14px;
    color: var(--textSecondary);
    background-color: var(--cardBg);
    border: 1px solid var(--cardBorder);
    border-radius: 999px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin: 0;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
#frmViews .mainDescCon .ProgressBarItem:hover{
    background-color: rgba(251,183,49,0.1);
    color: var(--brown);
    border-color: var(--brown);
}
#frmViews .mainDescCon .ProgressBarItem.selected{
    background-color: var(--brown);
    color: var(--darkBrown);
    border-color: var(--brown);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(251,183,49,0.25);
}

/* Date row at the bottom of the banner */
#frmViews .mainDescCon .mainDesDateCon{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 12px 18px;
}
#frmViews .mainDescCon .mainDescAgeDate{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}
#frmViews .mainDescCon .mainDescExtDate{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0;
}
#frmViews .mainDescCon .lblAgeCom,
#frmViews .mainDescCon .lblSEstCom{
    color: var(--textSecondary);
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
#frmViews .mainDescCon .receiveDate,
#frmViews .mainDescCon .estComDate{
    color: var(--textPrimary);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    margin-left: 6px;
    line-height: 1.2;
}
#frmViews .mainDescCon .mainDescAgeDate .rorAgeCon{
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--cardBorder);
    color: var(--textSecondary);
    border-radius: 999px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 0 2px 0 0;
    text-transform: uppercase;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
#frmViews .rorAgeCon .rorAgeLbl,
#frmViews .rorAgeCon .rorAgeUnit{
    margin: 0;
}
/* Age-state modifiers — applied by JS based on daysDiff thresholds */
#frmViews .mainDescCon .mainDescAgeDate .rorAgeCon.rorAgeGreen{
    background-color: rgba(114,117,82,0.22);
    border-color: var(--green);
    color: var(--lightGreen);
}
#frmViews .mainDescCon .mainDescAgeDate .rorAgeCon.rorAgeOrange{
    background-color: rgba(251,183,49,0.18);
    border-color: var(--yellow);
    color: var(--lightYellow);
}
#frmViews .mainDescCon .mainDescAgeDate .rorAgeCon.rorAgeRed{
    background-color: rgba(204,41,54,0.18);
    border-color: var(--red);
    color: var(--lightRed);
}

#frmViews .mainDetailsCon{
    display: flex;
    flex-flow: row nowrap;
    box-sizing: border-box;
    margin-top: 0.5vw;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* 16px horizontal padding matches the .mainDescCon banner above so
       the panels below align with its left and right edges. */
    padding: 0 16px;
    gap: 0.6vw;
}
#frmViews .leftDCon{
    background-color: var(--lightBrown);
    flex: 0 0 30%;
    max-height: 100%;
    position: relative;
    border: 1px solid var(--cardBorder);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    padding-bottom: 1vw;
    overflow: auto;
}
#frmViews .leftDCon .leftDConHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0.7vw 0.7vw;
    position: sticky;
    top: 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--cardBorder);
    z-index: 5;
}
#frmViews .leftDCon .btnEdit{
    width: 36px;
    height: 36px;
    padding: 6px;
    background: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 6px;
    cursor: pointer;
    object-fit: contain;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
#frmViews .leftDCon .btnEdit:hover{
    border-color: var(--brown);
    background: rgba(251,183,49,0.08);
}

#frmViews .leftDCon .frmVPrintBtns span.disabled{
    opacity: 0.4;
    cursor: not-allowed;
}

#frmViews .leftDConHeader .btnRepCon{
    width: 100%;
    display: none;
}
#frmViews .leftDConHeader #frmVRepEmpCon{
    display: flex;
    gap: 6px;
    align-items: center;
}
#frmViews .leftDConHeader .btnEdit{
    padding: 6px;
}
#frmViews .leftDConHeader .btnEditCon{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

/* Documents to print — menu button + dropdown (dark theme) */
.frmVPrintBtnCon {
    padding: 7px 12px;
    background-color: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    color: var(--textPrimary);
    font-size: 0.85vw;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.frmVPrintBtnCon::after{
    content: "▼";
    font-size: 0.6vw;
    opacity: 0.7;
}
.frmVPrintBtnCon:hover{
    border-color: var(--brown);
    color: var(--brown);
}

.frmVPrintBtns {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    border: 1px solid var(--cardBorder);
    background-color: var(--white);
    border-radius: 8px;
    min-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 10;
    padding: 6px;
}

.frmVPrintBtns span {
    padding: 8px 12px;
    display: block;
    white-space: nowrap;
    color: var(--textPrimary);
    font-size: 0.85vw;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.frmVPrintBtns span:hover {
    background-color: rgba(251,183,49,0.1);
    color: var(--brown);
}
.frmVPrintBtnCon:hover + .frmVPrintBtns, .frmVPrintBtns:hover {
    display: block;
}

#frmViews .pinNoteCon{
  width: 100%;
  box-sizing: border-box;
}
#frmViews .pinNote{
  background-color: var(--lightRed);
  border-radius: 7px;
  border: 1px var(--red) solid;
  box-sizing: border-box;
  padding: 8px;
  margin: 15px 8px 0 8px;
}
#frmViews .pinNoteHeader{
  font-size: 110%;
  font-weight: bold;
  width: 100%;
  margin-bottom: 5px;
}
#frmViews .pinNoteCreator{
  width: 100%;
  text-align: right;
  color: var(--white);
  margin-top: 5px;
}
#frmViews .pinNoteDate{
  width: 100%;
  text-align: right;
  color: var(--red);
}


#frmViews .leftDCon .sectionCon{
    width: auto;
    margin: 0.7vw;
    background: var(--white);
    border: 1px solid var(--cardBorder);
    border-radius: 8px;
    overflow: hidden;
}
#frmViews .sectionCon .secHeader{
    width: auto;
    margin: 0;
    padding: 0.55vw 0.9vw;
    background: linear-gradient(to right, rgba(251,183,49,0.10), transparent 70%);
    border-bottom: 1px solid var(--cardBorder);
    color: var(--textPrimary);
    font-size: 0.85vw;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#frmViews .sectionCon .firstHeader{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0;
}
#frmViews .sectionCon table{
    width: 100%;
    margin: 0;
    padding: 0.4vw 0;
}
#frmViews .sectionCon tr{
    width: 100%;
}
/* Hide rows where the value cell is empty so empty fields don't render as visible label-with-nothing */
#frmViews .sectionCon tr:has(td:nth-child(2):empty){
    display: none;
}
#frmViews .sectionCon td:nth-child(1){
    color: var(--textSecondary);
    vertical-align: top;
    font-size: 0.78vw;
    font-weight: 400;
    padding: 0.4vw 0.5vw 0.4vw 0.9vw;
    width: 38%;
    text-align: left;
}
#frmViews .sectionCon td:nth-child(2){
    color: var(--textPrimary);
    font-size: 0.9vw;
    font-weight: 400;
    padding: 0.4vw 0.9vw 0.4vw 0.5vw;
    width: 62%;
    text-align: left;
    word-break: break-word;
}

#frmViews .rightDCon{
    display: flex;
    flex-flow: column nowrap;
    max-height: 100%;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Sticky wrapper: pins tabs + toolbar to the top of the right panel
   while the items list scrolls below them. */
#frmViews .rightDCon .navStrip{
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--darkBrown);
    padding-top: 14px;
}
#frmViews .rightDCon .navStrip .optCon{
    margin-top: 0;
}
#frmViews .optCon{
    position: relative;
    width: 100%;
    padding: 0 0.7vw;
    margin: 14px 0 0 0;
    box-sizing: border-box;
    /* Horizontal scroll when many tabs; scrollbar hidden for clean look */
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}
#frmViews .optCon::-webkit-scrollbar{ display: none; }
#frmViews .optCon ul{
    list-style: none;
    margin: 0;
    padding-top: 14px; /* room for count badge that sits above the row */
    display: flex;
    gap: 4px;
    align-items: flex-end;
    white-space: nowrap;
    min-width: max-content;
    box-sizing: border-box;
}
#frmViews .optCon li{
    display: inline-flex;
    padding: 0.45vw 0.85vw;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    color: var(--textSecondary);
    font-size: 0.85vw;
    font-weight: 500;
    border-radius: 6px 6px 0 0;
    transition: color 0.18s ease, background 0.18s ease;
}
#frmViews .optCon li:hover{
    color: var(--textPrimary);
    background: rgba(251,183,49,0.04);
}
#frmViews .optCon li.active{
    color: var(--brown);
}
/* Inline-style display:none on some li still wins via specificity, so hidden tabs stay hidden */

/* Count badge — neutral by default, gold-tinted when tab is active or hovered.
   Positioned so the badge sits ABOVE the tab text, not overlapping it. */
#frmViews .optCon li div{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -12px;
    right: 4px;
    background-color: var(--inputBg);
    color: var(--textSecondary);
    border: 1px solid var(--cardBorder);
    border-radius: 10px;
    min-width: 18px;
    height: 16px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#frmViews .optCon li div span{
    display: flex;
    align-items: center;
    padding: 0 5px;
}
#frmViews .optCon li.active > div,
#frmViews .optCon li:hover > div{
    background: rgba(251,183,49,0.15);
    border-color: rgba(251,183,49,0.4);
    color: var(--brown);
}

/* Thin grey divider under the whole tab row */
#frmViews .optCon .tabSelectBar{
    position: relative;
    width: 100%;
    height: 1px;
    background-color: var(--cardBorder);
    margin-top: 0;
}
/* Old JS-positioned selector is no longer used — pseudo-element approach below
   keeps the underline in the active tab's own coordinate system so it auto-
   tracks the tab on resize, scroll, and reflow. */
#frmViews .optCon .tabSelectBar .selector{
    display: none;
}
/* Gold underline drawn as a pseudo-element on each tab; scales to 1 when active.
   Because it's positioned relative to the tab itself, it's always centred
   under that tab regardless of viewport size or scroll position. */
#frmViews .optCon li::after{
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -1px;
    height: 2px;
    background-color: var(--brown);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(251,183,49,0.5);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
#frmViews .optCon li.active::after{
    transform: scaleX(1);
}

/* ------------------------------------------------------ */
/*  Action toolbar: one row containing the action button(s),
    the filter pills, and the show-deleted toggle.
    Flat (no card) so it reads as one continuous region
    with the tab row above.                                 */
/* ------------------------------------------------------ */
#frmViews .actionSection{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0.6vw 0.9vw;
}
#frmViews .actionCon{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Primary action button — gold filled, "+" prefix */
#frmViews .actionCon .actBtn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4vw 0.9vw;
    background: var(--brown);
    color: var(--darkBrown);
    border: 1px solid var(--brown);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85vw;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
#frmViews .actionCon .actBtn:hover{
    background: #ffc547;
    border-color: #ffc547;
}
#frmViews .actionCon .actBtn:active{
    transform: scale(0.97);
}
#frmViews .actionCon .actBtn::before{
    content: '+';
    font-size: 1.05vw;
    line-height: 1;
    font-weight: 700;
}

/* Outlined variants — destructive (red) and accent (gold) */
#frmViews .actionCon .actBtn.closeActBtn{
    background: transparent;
    color: var(--red);
    border-color: var(--red);
}
#frmViews .actionCon .actBtn.closeActBtn:hover{
    background: rgba(204,41,54,0.1);
    border-color: var(--red);
}
#frmViews .actionCon .actBtn.closeActBtn::before{
    content: '×';
    font-size: 1.15vw;
}
#frmViews .actionCon .actBtn.reopenActBtn{
    background: transparent;
    color: var(--brown);
    border-color: var(--brown);
}
#frmViews .actionCon .actBtn.reopenActBtn:hover{
    background: rgba(251,183,49,0.08);
}
#frmViews .actionCon .actBtn.reopenActBtn::before{
    content: '↻';
    font-size: 0.95vw;
}

/* Dropdown variant — used when 3+ plain add buttons are present.
   JS in optSelected detects this and rewraps them at runtime. */
#frmViews .actionCon .actBtnDropdown{
    position: relative;
}
/* Invisible bridge strip between trigger and menu so the cursor
   doesn't lose hover state while moving between them.
   Without this, the 6px visual gap drops onto the items list
   below and the dropdown closes mid-travel. */
#frmViews .actionCon .actBtnDropdown::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: auto;
}
#frmViews .actionCon .actBtnDropdown > .actBtn{
    padding-right: 1.1vw;
}
#frmViews .actionCon .actBtnDropdown > .actBtn::after{
    content: '▼';
    font-size: 0.55vw;
    margin-left: 4px;
    opacity: 0.75;
}
#frmViews .actionCon .actBtnDropdown .menu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--cardBorder);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    min-width: 220px;
    padding: 6px;
    z-index: 10;
    display: none;
}
#frmViews .actionCon .actBtnDropdown:hover .menu,
#frmViews .actionCon .actBtnDropdown.open .menu{
    display: block;
}
#frmViews .actionCon .actBtnDropdown .menu a{
    display: block;
    padding: 0.4vw 0.8vw;
    color: var(--textPrimary);
    font-size: 0.85vw;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
#frmViews .actionCon .actBtnDropdown .menu a:hover{
    background: rgba(251,183,49,0.1);
    color: var(--brown);
}

/* Show-deleted toggle chip — replaces the old visible checkbox */
#frmViews .showDelCon{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
}
#frmViews .showDelCon label{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.35vw 0.8vw 0.35vw 0.55vw;
    background: transparent;
    border: 1px solid var(--cardBorder);
    border-radius: 6px;
    cursor: pointer;
    color: var(--textSecondary);
    font-size: 0.8vw;
    font-weight: 500;
    transition: all 0.15s ease;
    user-select: none;
}
#frmViews .showDelCon label:hover{
    color: var(--textPrimary);
    border-color: var(--textSecondary);
}
#frmViews .showDelCon label:has(input:checked){
    color: var(--brown);
    border-color: var(--brown);
    background: rgba(251,183,49,0.08);
}
#frmViews .showDelCon input{
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    border: 1.5px solid var(--cardBorder);
    border-radius: 3px;
    cursor: pointer;
    margin: 0;
    display: inline-grid;
    place-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
#frmViews .showDelCon input:checked{
    background: var(--brown);
    border-color: var(--brown);
}
#frmViews .showDelCon input:checked::after{
    content: '';
    width: 8px;
    height: 8px;
    background: var(--darkBrown);
    clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 80% 0%, 38% 65%);
}

/* ------------------------------------------------------ */
/*  SHARED CARD STYLE (applies to both blocks)            */
/* ------------------------------------------------------ */

#frmViews .viewInstructCon,
#frmViews .viewCheckCon {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 14px;

  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 10px;

  padding: 16px 18px;
  margin: 0 0.2vw 1vw 2vw;

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  font-family: 'Roboto', sans-serif;
}

/* Icons */
#frmViews .viewInstructCon img,
#frmViews .viewCheckCon img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ------------------------------------------------------ */
/*  HEADINGS                                              */
/* ------------------------------------------------------ */

#frmViews .viewInstructCon h3,
#frmViews .viewCheckCon h3 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
  color: #2e3a45;
}

#frmViews .viewInstructCon h4 {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brown);
}

/* ------------------------------------------------------ */
/*  INSTRUCTIONS PARAGRAPHS                               */
/* ------------------------------------------------------ */

#frmViews .viewInstructCon p {
  margin: 0 0 12px 0;
  line-height: 1.55;
  color: #4a4f55;
}

/* ------------------------------------------------------ */
/*  CHECKLIST STYLING                                     */
/* ------------------------------------------------------ */

#frmViews .viewCheckCon .js_checkDetail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Checklist rows in single line */
#frmViews .viewCheckCon .checkRow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4a4f55;
  line-height: 1.4;
}

/* Modern checkbox look */
#frmViews .viewCheckCon input[type="checkbox"] {
  transform: scale(1.25);
  accent-color: #6ba442; /* modern green */
  cursor: pointer;
}

/* ------------------------------------------------------ */
/*  HOVER EFFECT                                          */
/* ------------------------------------------------------ */

#frmViews .viewInstructCon:hover,
#frmViews .viewCheckCon:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  border-color: #d7dade;
  transition: all 0.15s ease-in-out;
}


/* Filter pills live inside the toolbar; flex-grow so they fill the middle.
   Horizontal scroll for many filters; selected state is a gold-bordered chip. */
#frmViews .actionSection .filterCon{
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0;
    text-align: left;
}
#frmViews .actionSection .filterCon::-webkit-scrollbar{ display: none; }
#frmViews .actionSection .filterCon ul{
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: inherit;
}
#frmViews .actionSection .filterCon li{
    display: inline-flex;
    align-items: center;
    padding: 0.35vw 0.75vw;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--textSecondary);
    font-size: 0.8vw;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
#frmViews .actionSection .filterCon li:hover{
    color: var(--textPrimary);
    background: rgba(255,255,255,0.03);
}
#frmViews .actionSection .filterCon li.selected{
    color: var(--brown);
    border-color: var(--brown);
    background: rgba(251,183,49,0.08);
}

#frmViews .itemsCon{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 1vw 0 0 0;
    padding: 0 0.2vw 0 2vw;
    box-sizing: border-box;
    height: 100%;
}
#frmViews .multiItemsCon {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    background-color: var(--white);
    margin: 0 0 1.5vw 0;
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Status chips inside .bottomText (process / part state pills).
   Status class is added by JS based on item.displayProcess —
   .statReady (green), .statNotReady (red), .statInProgress (gold). */
#frmViews .bottomText ul {
    display: flex;
    flex-flow: row wrap;
    margin-top: 4px;
    gap: 4px;
    list-style-type: none;
    padding: 0;
}
#frmViews .bottomText li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 7px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--textPrimary);
    font-size: 0.7vw;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
#frmViews .bottomText li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
#frmViews .bottomText li.statReady {
    color: #8a8d6a;
    border-color: rgba(138,141,106, 0.45);
    background: rgba(138,141,106, 0.10);
}
#frmViews .bottomText li.statNotReady {
    color: var(--lightRed);
    border-color: rgba(204,41,54, 0.45);
    background: rgba(204,41,54, 0.10);
}
#frmViews .bottomText li.statInProgress {
    color: var(--brown);
    border-color: rgba(251,183,49, 0.45);
    background: rgba(251,183,49, 0.10);
}
#frmViews .bottomText .taskComment {
    margin-top: 4px;
    padding-left: 10px;
    border-left: 2px solid var(--cardBorder);
    color: var(--textMuted);
    font-size: 0.75vw;
    line-height: 1.4;
}

/* ------------------------------------------------------ */
/*  Item rows: flat, dense list with thin dividers.
    Transparent background, no card; relies on the dividers
    + typography hierarchy to separate rows.               */
/* ------------------------------------------------------ */
#frmViews .itemCon {
    padding: 0.6vw 0.9vw;
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid var(--cardBorder);
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease;
    position: relative;
}
#frmViews .itemCon:hover {
    background: rgba(255,255,255,0.025);
}
#frmViews .itemCon:hover .itemDetails > :first-child {
    border-color: var(--brown);
}
#frmViews .itemCon .itemDetails {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    gap: 12px;
}
#frmViews .itemCon .customTop {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 4px;
}
#frmViews .itemCon .customTop:empty {
    display: none;
}

/* Icon: 32px rounded-square card, modern style. Works for both <img>
   (default) and <div> (when param.ownIcon=true, e.g. task checkboxes).
   display:inline-grid + place-content centres any child (checkbox, etc.)
   without affecting <img> positioning, which uses object-fit. */
#frmViews .itemCon .itemDetails > :first-child {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 5px;
    background: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 7px;
    margin: 0;
    object-fit: contain;
    box-sizing: border-box;
    display: inline-grid;
    place-content: center;
    transition: border-color 0.15s ease;
}

/* Text columns */
#frmViews .itemCon .leftDiv {
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#frmViews .itemCon .rightDiv {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
#frmViews .itemCon div span {
    display: block;
    font-weight: 400;
}
#frmViews .itemCon .topText {
    color: var(--textPrimary);
    font-size: 0.9vw;
    font-weight: 500;
    line-height: 1.3;
    white-space: pre-wrap;
}
#frmViews .itemCon .bottomText {
    color: var(--textSecondary);
    font-size: 0.78vw;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-wrap;
}
#frmViews .itemCon .rightDiv .topText {
    font-size: 0.85vw;
    font-weight: 500;
}
#frmViews .itemCon .rightDiv .bottomText {
    color: var(--textMuted);
    font-size: 0.72vw;
}

/* Side icons (photo / link) — kept compact, gold-on-hover */
#frmViews .itemCon .linkCon {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 4px;
    width: auto;
    flex-shrink: 0;
    margin-left: 8px;
}
#frmViews .itemCon .linkCon img {
    width: 24px;
    height: 24px;
    padding: 4px;
    background: var(--inputBg);
    border: 1px solid var(--cardBorder);
    border-radius: 5px;
    margin: 0;
    object-fit: contain;
    transition: border-color 0.15s ease, background 0.15s ease;
}
#frmViews .itemCon .linkCon img:hover {
    border-color: var(--brown);
    background: rgba(251,183,49,0.08);
}

/* Multi-item group: linked children sit indented with a subtle
   left-edge connector so the hierarchy reads at a glance. */
#frmViews .multiItemsCon {
    width: 100%;
}
#frmViews .multiItemsCon > .itemCon.multiItemCon {
    padding-left: 3.2vw;
    background: rgba(255,255,255,0.012);
    box-shadow: inset 8px 0 0 var(--lightBrown);
}
#frmViews .multiItemsCon > .itemCon.multiItemCon:hover {
    background: rgba(255,255,255,0.04);
}

/* Status: deleted — red left bar + muted/strikethrough text */
#frmViews .itemCon.deleted {
    background: rgba(204,41,54,0.03);
    box-shadow: inset 3px 0 0 var(--red);
}
#frmViews .itemCon.deleted .topText {
    color: var(--textMuted);
    text-decoration: line-through;
}
#frmViews .itemCon.deleted .bottomText,
#frmViews .itemCon.deleted .rightDiv .topText,
#frmViews .itemCon.deleted .rightDiv .bottomText {
    color: var(--textMuted);
}

/* Ticket states (replaces previous inline-style overrides in JS) */
#frmViews .itemCon.overdue .rightDiv .bottomText {
    color: var(--lightRed);
    font-weight: 600;
}
#frmViews .itemCon.closed {
    opacity: 0.6;
}
#frmViews .itemCon.closed .itemDetails > :first-child {
    background: transparent;
}


#frmViews .multiItemsCon div br{
    color: #e40c2b;
}

/*FORM ADD PRODUCT TYPES*/
#frmProdType{
    max-width: 70vw;
}
#frmProdType .gFrmSection{
    background-color: var(--lightBrown)
}
#frmProdType .qCon{
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 1vw;
    padding: 0 1.5vw 0 1.5vw;
}
#frmProdType .qCon .qItem{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.5vw;
    margin-right: 2vw;
    padding: 0.5vw;
    background-color: var(--white);
    border-radius: 7px;
    color: var(--darkBrown);
}
#frmProdType .qCon .q{
    width: 70%;
    margin-right: 1vw;
}
#frmProdType .qCon .ans{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 30%;
}
#frmProdType .qCon .ans div{
    padding: 0.6vw 0 0.6vw 0;
    background-color: var(--white);
    width: 47%;
    text-align: center;
    cursor: pointer;
    border-radius: 7px;
}
#frmProdType .qCon .ans .yes{
    color: var(--green);
    border: solid 1px var(--darkBrown);
}
#frmProdType .qCon .ans .yes.selected{
    background-color: var(--green);
    color: var(--white);
    border: none;
}
#frmProdType .qCon .ans .no{
    color: var(--red);
    border: solid 1px var(--darkBrown);
}
#frmProdType .qCon .ans .no.selected{
    background-color: var(--red);
    color: var(--white);
    border: none;
}

#frmProdOrderSec{
    max-width: 70vw;
    background-color: var(--white);
}
#frmProdOrderSec .gFrmSection{
    background-color: var(--lightBrown)
}
#frmProdOrderSec .qCon{
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 1vw;
    padding: 0 1.5vw 0 1.5vw;
}
#frmProdOrderSec .qCon .qItem{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.5vw;
    margin-right: 2vw;
    padding: 0.5vw;
    background-color: var(--white);
    border-radius: 7px;
    color: var(--darkBrown);
}
#frmProdOrderSec .qItem .q{
    max-width: 60%;
    margin-right: 1vw;
}
#frmProdOrderSec .qItem .ans{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 115px;
}
#frmProdOrderSec .qCon .ans div{
    padding: 0.6vw 0 0.6vw 0;
    background-color: var(--white);
    width: 47%;
    text-align: center;
    cursor: pointer;
    border-radius: 7px;
}
#frmProdOrderSec .qCon .ans .yes{
    color: var(--green);
    border: solid 1px var(--darkBrown);
}
#frmProdOrderSec .qCon .ans .yes.selected{
    background-color: var(--green);
    color: var(--white);
    border: none;
}
#frmProdOrderSec .qCon .ans .no{
    color: var(--red);
    border: solid 1px var(--darkBrown);
}
#frmProdOrderSec .qCon .ans .no.selected{
    background-color: var(--red);
    color: var(--white);
    border: none;
}

#frmProdType .priceScaleItem{
    margin-bottom: 0.5vw;
}
#frmProdType .pScaleInCon{
    margin-top: 0.2vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
#frmProdTScalePCon span{
    font-weight: bold;
}
#frmProdType .pScaleInCon input{
    outline-color: var(--darkBrown);
    height: 2.5vw;
    width: 45%;
    padding-left: 1vw;
    font-size: 110%;
    border-radius: 7px;
}
#frmProdType .pScaleInCon input::placeholder{
    color: var(--lightBrown);
}

#frmProdType .frmBtnBox{
    padding: 0.5vw 1vw 0.5vw 1vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: var(--white);
    align-items: center;
}
#frmProdType .frmBtnBox .chkPriceListCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#frmProdType .frmBtnBox .chkPriceListCon input{
    margin-right: 0.3vw;
}
#frmProdType .frmBtnBox .btnCon{
    display: flex;
    flex-flow: row nowrap;
}

/*FORM CONTACT PERSON*/
#frmCP .userCon{
    display: none;
    width: 100%;
    position: relative;
    align-items: center;
    padding-left: 10px;
    cursor: pointer;
}

/*FORM TICKET*/

#frmTicket textarea{
  font-family: 'roboto', sans-serif;
  border-radius: 7px;
  width: 100%;
  box-sizing: border-box;
  outline-color: var(--darkBrown);
  display: block;
  padding: 0.5vw 1vw 0.5vw 1vw;
  margin-bottom: 0.5vw;
  margin-top: 0.2vw;
}
/* Container */
#frmTicket .priorityCon {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 5px 0 12px 0;
}

/* Left label */
#frmTicket .priorityCon .pLabel {
  font-weight: 600;
  font-size: 14px;
  color: var(--darkBrown);
  margin-right: 4px;
}

/* Each option */
#frmTicket .priorityCon .pOption {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--darkBrown);
  user-select: none;
}

/* Hide the radio */
#frmTicket .priorityCon .pOption input[type="radio"] {
  display: none;
}

/* The colored dot */
#frmTicket .priorityCon .pOption .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--lightBrown);
  background: var(--white);
  transition: 0.2s;
}

/* Colors */
#frmTicket .pOption.normal .dot {
  border-color: var(--green);
}

#frmTicket .pOption.medium .dot {
  border-color: var(--yellow);
}

#frmTicket .pOption.high .dot {
  border-color: var(--red);
}

/* Checked state: dot fills with color */
#frmTicket .pOption.normal input[type="radio"]:checked ~ .dot {
  background: var(--green);
}

#frmTicket .pOption.medium input[type="radio"]:checked ~ .dot {
  background: var(--yellow);
}

#frmTicket .pOption.high input[type="radio"]:checked ~ .dot {
  background: var(--red);
}

/* Checked text bold */
#frmTicket .pOption input[type="radio"]:checked ~ span {
  font-weight: 600;
}



#frmTicketSecTic .detail{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#frmTicketSecTic .detail label{
  width: 24%;
}

/*FORM TASK — task checkbox styled to match the rest of the dark theme.
  Sits centred inside the 32px icon-box card. Custom-drawn gold tick
  via clip-path (same pattern as the "Show deleted" toggle). */
#frmViewsItemCon .chkBox{
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--cardBorder);
  border-radius: 3px;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#frmViewsItemCon .chkBox:checked{
  background: var(--brown);
  border-color: var(--brown);
}
#frmViewsItemCon .chkBox:checked::after{
  content: '';
  width: 9px;
  height: 9px;
  background: var(--darkBrown);
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 80% 0%, 38% 65%);
}


#frmTaskSecTask{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#frmTaskSecTask label{
  width: 100%;
}
#frmTaskSecTask .detail{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
#frmTaskSecTask .detail label{
  width: 33%;
}


/* MAIN COMMENTS BOX – same look as chkListInputCon */
#frmTaskComments{
    width: 100%;
}
#frmTaskComments .comments {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  background: var(--white);
  padding: 16px;
  border: 1px solid var(--lightBrown);
  border-radius: 10px;
  margin: 12px 0;
}

/* Label + Textarea */
#frmTaskComments .comments .gLabel {
  flex: 1;
  font-size: 14px;
  color: var(--darkBrown);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Textarea same style as input */
#frmTaskComments .comments textarea {
  border: 1px solid var(--lightBrown);
  border-radius: 8px;
  padding: 10px 12px;

  /* MATCH PROGRAM FONT */
  font-family: inherit;      /* ← BELANGRIK */
  font-size: 14.5px;
  line-height: 1.4;

  background: #fff;
  transition: border 0.2s, box-shadow 0.2s, background 0.2s;
  resize: vertical;
  min-height: 60px;
}


#frmTaskComments .comments textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(74,112,139,0.25);
  background: var(--white);
}

/* Button container */
#frmTaskComments .comments .gFrmBtnBox {
  display: flex;
  align-items: flex-end;
}

#frmTaskComments .gBtnSave{
  background-color: var(--green);
  box-shadow: 1px 1px 3px grey;
  border-radius: 7px;
  padding: 0.5vw 1vw 0.5vw 1vw;
  font-family: 'roboto', sans-serif;
  display: inline-block;
  color: var(--white);
  font-size: 100%;
  font-weight: normal;
  cursor: pointer;
  margin: 0.2vw;
}
/* MAIN TABLE – Same look as tblChkList */
#frmTaskTblComm {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: var(--white);
  border: 1px solid var(--lightBrown);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

/* Header */
#frmTaskTblComm thead {
  background: var(--lightBrown);
}

#frmTaskTblComm th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--darkBrown);
  border-bottom: 1px solid var(--lightBrown);
}

/* Body rows */
#frmTaskTblComm td {
  padding: 12px 10px;
  border-bottom: 1px solid #e8e8e8;
  color: var(--darkBrown);
  vertical-align: top;
}

/* Zebra rows */
#frmTaskTblComm tr:nth-child(even) {
  background: #faf8f4;
}

/* Hover effect */
#frmTaskTblComm tbody tr:hover {
  background: #f1ede6;
}


/*FORM TICKET CHECK LIST*/
/* ───────────────────────────────────────────────
   INPUT CARD (chkListInputCon)
   ─────────────────────────────────────────────── */

.chkListInputCon {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  background: var(--white);
  padding: 16px;
  border: 1px solid var(--lightBrown);
  border-radius: 10px;
  margin: 12px 0;
}

/* Label + Input */
.chkListInputCon .gLabel {
  flex: 1;
  font-size: 14px;
  color: var(--darkBrown);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chkListInputCon input[type="text"] {
  border: 1px solid var(--lightBrown);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  background: #fff;
  transition: border 0.2s, box-shadow 0.2s, background 0.2s;
}

.chkListInputCon input[type="text"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(74,112,139,0.25);
  background: var(--white);
}

/* ───────────────────────────────────────────────
   TABLE (tblChkList)
   ─────────────────────────────────────────────── */

.tblChkList {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: var(--white);
  border: 1px solid var(--lightBrown);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}

/* Header */
.tblChkList thead {
  background: var(--lightBrown);
}

.tblChkList th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--darkBrown);
  border-bottom: 1px solid var(--lightBrown);
}

/* Body rows */
.tblChkList td {
  padding: 12px 10px;
  border-bottom: 1px solid #e8e8e8;
  color: var(--darkBrown);
}

/* Zebra rows for professional look */
.tblChkList tr:nth-child(even) {
  background: #faf8f4;
}

/* Row hover */
.tblChkList tbody tr:hover {
  background: #f1ede6;
}

/* Delete button cell */
.tblChkList .btnDelete {
  color: var(--red);
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}

.tblChkList .btnDelete:hover {
  color: var(--lightRed);
}
/* Default delete icon */
.tblChkList .delIcon {
  color: var(--red);     /* Rooi */
  cursor: pointer;
  transition: 0.2s ease;
}

/* Hover state */
.tblChkList .delIcon:hover {
  color: var(--lightRed);   /* Lighter red */
  transform: scale(1.2);    /* Klein pop effect */
}


/* ============================================================
   TICKET REVIEW FORM — uses .gFrmContent (legacy class) plus the
   form-specific .infoMsg + .reviewLabel. The shared .gFrm rules
   provide the info-box and input styling; these rules just refine
   layout and override the previous light-theme block.
   ============================================================ */
#frmTicketReview .gFrmContent {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: visible;
  max-height: none;
}

/* Info message — drop the default .gFrm .infoMsg margin since the
   parent container has its own padding */
#frmTicketReview .infoMsg {
  margin: 0;
  line-height: 1.6;
}

/* The labelled date field — label text above (small, uppercase, muted via
   shared .gFrm .reviewLabel rule), input below (dark, soft, gold focus
   via shared .gFrm input[type="date"] rule). */
#frmTicketReview .reviewLabel {
  display: flex;
  flex-direction: column;
  gap: 0; /* margin-top:6px on the input already provides spacing */
  margin: 0;
  white-space: normal;
}








/*FORM Lost reason*/
#frmLostReason textarea{
  font-family: 'roboto', sans-serif;
  border-radius: 7px;
  width: 100%;
  box-sizing: border-box;
  outline-color: var(--darkBrown);
  display: block;
  padding: 0.5vw 1vw 0.5vw 1vw;
  margin-bottom: 0.5vw;
  margin-top: 0.2vw;
}
#frmHoldReason textarea{
    font-family: 'roboto', sans-serif;
    border-radius: 7px;
    width: 100%;
    box-sizing: border-box;
    outline-color: var(--darkBrown);
    display: block;
    padding: 0.5vw 1vw 0.5vw 1vw;
    margin-bottom: 0.5vw;
    margin-top: 0.2vw;
  }

/*FORM PRODUCT*/

#frmProd .chkBox{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
#frmProd .chkBox input{
    width: 30px;
}
#frmProd .chkBox span{
    margin-left: 5px;
}

#frmProd .qCon{
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 1vw;
}
#frmProd .qCon .aYesNo{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    margin-bottom: 1vw;
}
#frmProd .qCon .aSelect{
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    margin-bottom: 1vw;
}

#frmProd .qCon .q{
    width: 60%;
    margin-right: 1vw;
}
#frmProd .qCon .ans{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 40%;

}
#frmProd .qCon .ans div{
    padding: 0.5vw 0 0.5vw 0;
    border: 1px solid var(--darkBrown);
    width: 45%;
    text-align: center;
    cursor: pointer;
}
#frmProd .qCon .ans .yes{
    margin-right: 1vw;
    color: var(--green);
}
#frmProd .qCon .ans .yes.selected{
    background-color: var(--green);
    color: var(--white);
}
#frmProd .qCon .ans .no{
    color: var(--red);
}
#frmProd .qCon .ans .no.selected{
    background-color: var(--red);
    color: var(--white);
}

#frmProd .partsCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 1vw 0 0 0;
    border: 1px solid var(--lightBrown);
    background-color: var(--white);
    max-height: 500px;
    overflow-y: auto;
    border-radius: 7px;
    margin-bottom: 0.5vw;
}
#frmProd .partsCon .partItem{
    width: 90%;
    height: 2vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 0.5vw 1vw 0.5vw 1vw;
    background-color: var(--lightBrown);
    margin-bottom: 1vw;
    cursor: pointer;
    border-radius: 7px;
}
#frmProd .partsCon .partItem.selected{
    background-color: var(--green);
    color: var(--white);
}

#frmProd .fixProdCon .prodItem{
    position: relative;
}
#frmProd .fixProdCon .prodItem img{

    height: 2vw;
    max-height: 25px;
    position: absolute;
    top: 5%;
    right: 5%;
    cursor: pointer;
}
/* FORM PROFILE*/
#frmProfile .frmProfilePic{
  height: 12.5vw;
  width: 12.5vw;
  border: 0.3vw solid var(--darkBrown);
  border-radius: 7px;
  position: relative;
  background: url('../img/logoPlaceholder.png');
  background-size: 100% 100%;
  overflow: hidden;
}
#frmProfile .frmProfilePic img{
  width: 100%;
  background-color: transparent;
}
#frmProfile .profileFotoFile{
  position: absolute;
  bottom: 0;
  margin: 0;
  border: 0;
  outline: none;
  color: transparent;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4vw 2.4vw;
  cursor: pointer;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}
#frmProfile .profileFotoFile::-webkit-file-upload-button{
  visibility: hidden;
}
#frmProfile .profileFotoFile::before{
  content: url('../img/icoUpload.png');
  display: flex;
  flex-flow: column;
  align-items: center;
  -webkit-user-select:none;
}/*
#frmProfile .profileFotoFile::after{
  content: 'upload';
  font-family: 'roboto', sans-serif;
  font-weight: bold;
  color: var(--white);
  display: block;
  text-align: center;
  top: 70px;
  font-size: 50%;
  position: absolute;
}*/
#frmProfile .profileFotoFile:hover{
  opacity: 1;
}

/* FORM WEB ROR*/
#frmRor .gItems div{
    width: 49%;
    height: 3vw;
    max-height: 30px;
}
#frmRor .itemCon{
    border: 1px solid var(--cardBorder);
    padding: 1vw;
    margin-bottom: 0.5vw;
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--white);
    border-radius: 8px;
}
#frmRor .itemCon .rorItem{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 0.5vw;
    padding: 0.5vw 0.7vw;
    background-color: var(--lightBrown);
    border-radius: 6px;
    cursor: pointer;
    color: var(--textPrimary);
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
#frmRor .itemCon .rorItem:hover{
    background-color: var(--inputBg);
}
#frmRor .itemCon .rorItem.selected{
    background-color: rgba(251,183,49,0.08);
    box-shadow: inset 0 0 0 1px var(--brown);
    color: var(--brown);
}

/* FORM NOTE*/
#frmNote .detail textarea{
    border-radius: 7px;
    margin-top: 0.1vw;
    padding: 1vw;
    font-size: 120%;
    font-family: 'roboto', sans-serif;
}

/* Pin-this-note chip toggle — sits on the LEFT of the footer
   (margin-right:auto pushes it left while Save/Delete stay right).
   Default: pure white text + visible border. Hover: gold border + text.
   When ticked: the checkbox itself fills gold via the shared
   .gFrm input[type="checkbox"]:checked rule — chip stays default. */
.gFrm .pinCheckBox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  background: transparent;
  border: 1px solid var(--textMuted);
  border-radius: 7px;
  color: var(--trueWhite);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  margin-right: auto;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gFrm .pinCheckBox:hover {
  color: var(--brown);
  border-color: var(--brown);
}
.gFrm .pinCheckBox:has(input:checked) {
  color: var(--brown);
  border-color: var(--brown);
  background: rgba(251,183,49,0.10);
}
.gFrm .pinCheckBox input {
  margin: 0; /* override legacy 1vw left margin — flex gap handles spacing */
}

/* FORM ORDER*/
#frmOrder .ordItemCon{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 10px;
    background-color: var(--white);
    margin-bottom: 7px;
    border-radius: 7px;
    cursor: pointer;
}
#frmOrder .ordItemCon:hover{
    box-shadow: 0 0 5px var(--brownShadow);
}
#frmOrder .ordItemTop{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    color: var(--darkBrown);
}
#frmOrder .ordItemBot{
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 80%;
    color: var(--brown);
}

#frmOrder .ordItemCon.selected{
    background-color: var(--green);
}
#frmOrder .ordItemCon.selected *{
    color: white;
}


/* FORM PRICELIST*/
#frmPList{
  box-shadow: none;
  border-radius: 0;
  height: 100%;
  overflow-y: hidden;
}
#frmPList .priceListCon{
    height: 100%;
}
#frmPList .priceLCreateCon{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 30px 30px 0 30px;
    flex-flow: row nowrap;
    width: 100%;
}
#frmPList .priceLCreateCon.disabled{
    pointer-events: none;
}

#frmPList .larger{
    width: 300px;
}
#frmPList .lblMarging{
    margin-right: 10px;
}

#frmPList .priceTypeTabs{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: center;
    font-size: 130%;
}
#frmPList .priceTypeTabs div{
    border: 1px solid var(--darkBrown);
    display: flex;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
}
#frmPList .priceTypeTabs div:nth-child(n+2){
    margin-left: 10px;
}
#frmPList .priceTypeTabs div.selected{
    background-color: var(--white);
}

#frmPList .frmPListHeader{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 30px 0 0 0;
  border-bottom: 2px solid var(--darkBrown);
  padding: 0 30px;
  box-sizing: border-box;
}
#frmPList .frmPListHeader h2{
    padding-bottom: 10px;
    flex-grow: 1;
}


#frmPList .frmPListHeader .headTabsCon{
    display: flex;
    flex-flow: row nowrap;
  
}

#frmPList .frmPHeadTab{
  padding: 5px 10px 10px 10px;
  border-radius: 7px 7px 0 0;
  margin-left: .5vw;
  cursor: pointer;
  height: 100%;
}
#frmPList .frmPHeadTab.selected{
    background-color: var(--white);
    color: var(--darkBrown);
}
#frmPList .frmPHeadTab:hover{
  background-color: var(--white);
  color: var(--darkBrown);
}

#frmPList .frmPListBody{
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 100%;
  padding-bottom: 210px;
}

#frmPList .frmPListBody .mainTblCon{
    width: 80%;
    max-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
}
#frmPList .frmPListBody .frmPListConR{
    width: 20%;
    max-height: 100%;
    overflow-y: auto;
}

#frmPList th{
  text-align: center;
  font-weight: bold;
  padding-bottom: 8px;
  padding-top: 30px;
}
#frmPList td input{
  padding: 5px .4vw;
  margin: 5px .4vw;
  border-radius: 7px;
  color: var(--darkBrown);
  background-color: var(--white);
  width: 7vw;
}
#frmPList td{
  text-align: left;
  border-bottom: 1px solid var(--darkBrown);
  height: 25px;
  cursor: pointer;
  width: 100%;
  padding-left: 5px;
  vertical-align: middle;
}
#frmPList .frmPListConL{
    height: 100%;
    box-sizing: border-box;
}
#frmPList .sticky-header{

    background-color: var(--lightBrown);
    border-bottom: 1px solid var(--darkBrown);
}
#frmPList .frmPListConR{
  background-color: var(--xLightBrowns);
  padding: 40px 15px;
  min-width: 10vw;
  box-shadow: -4px 0 4px var(--brownShadow);
}
#frmPList .frmPListConR .productSelect{
  display: flex;
  flex-flow: row nowrap;
  margin: 8px 0;
}
#frmPList .frmPListConR .productSelect span{
  margin-left: 0.5vw;
  color: var(--darkBrown);
}
#frmPList .priceListBtnCon{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0 30px;
    box-sizing: border-box;
    background-color: var(--white);
    border-top: var(--darkBrown) 2px solid;
    box-shadow: 1px 1px 5px grey;
}
#frmPList .priceListBtnCon .rightCon{
    display: flex;
    flex-flow: row nowrap;
}
#frmPList .priceListBtnCon .printBtn.disable{
    pointer-events: none;
    cursor:not-allowed;
    opacity: 0.5;
}
/* FORM DOC*/
#frmDoc {
    width: 90vw;
    height: 90vh;
    overflow-y: hidden;
}

#frmDoc .frmBody{
    display: flex;
    flex-flow: row nowrap;
    padding: 1vw;
    height: 100%;
}
#frmDoc .frmBody .details{
    width: 40%;
    max-height: 100%;
    background-color: var(--white);
    border-radius: 7px;
    box-shadow: 1px 1px 3px grey;
    overflow-y: auto;
    padding-bottom: 35px;
}

#frmDoc .frmBody .photos{
    display: flex;
    flex-flow: column nowrap;
    padding: 1vw;
    width: 60%;
    max-height: 100%;
    margin-left: 1vw;
    background-color: var(--white);
    border-radius: 7px;
    box-shadow: 1px 1px 3px grey;
    overflow-y: auto;
    padding-bottom: 50px;
}
#frmDoc .photos .imgCon{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 0.5vw;
    width: 100%;
    height: 100%;
}
#frmDoc .photos .docIFrame{
    width: 100%;
    height: 100%;
}
#frmDoc .photos .btnPrev{
    position: absolute;
    top: 50%;
    left: 5%;
    font-size: 300%;
    font-weight: bolder;
    color: var(--white);
    z-index: 1;
    cursor: pointer;
    background-color: black;
    opacity: 0.6;
}
#frmDoc .photos .btnNext{
    position: absolute;
    top: 50%;
    right: 5%;
    font-size: 300%;
    font-weight: bolder;
    color: var(--white);
    z-index: 1;
    cursor: pointer;
    background-color: black;
    opacity: 0.6;
}
#frmDoc .photos .btnDel{
    position: absolute;
    top: 0;
    margin-top: 5px;
    right: 0;
    margin-right: 5px;
    height: 20px;
    cursor: pointer;
}
#frmDoc .photos .addPage{
    margin-top: 0.5vw;
    cursor: pointer;
}


#frmDoc .frmSecCon{
    display: flex;
    flex-flow: column nowrap;
}
#frmDoc .frmSection{
    display: flex;
    flex-flow: column nowrap;
    padding: 1vw;
}
#frmDoc .frmSection .secHeader{
    font-size: 130%;
    font-weight: bold;
    border-bottom: solid 2px var(--lightBrown);
    margin-bottom: 1.5vw;
}
#frmDoc .frmSection .inputCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 0.7vw;
}
#frmDoc .frmSection .LblCon{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 0.5vw;
}


#frmDoc .inputCon span{
    width: 30%;
    font-size: 100%;
    text-align: right;
    padding-right: 1vw;
    color: var(--brown);
}
#frmDoc .inputCon input{
    width: 70%;
    border: solid 1.5px var(--brown);
    height: 2vw;
    max-height: 30px;
    border-radius: 7px;
    padding-left: 1vw;
    font-size: 110%;
}
#frmDoc .inputCon select{
    width: 70%;
    border: solid 1.5px var(--brown);
    height: 2.2vw;
    max-height: 35px;
    border-radius: 7px;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    font-size: 110%;
    margin-right: 10px;
}

#frmDoc .disTbl table{
    width: 100%;
    margin: 0 auto;
}
#frmDoc .disTbl tr{
    width: 100%;
}
#frmDoc .disTbl td:nth-child(1){
    color: var(--brown);
    text-align: right;
    vertical-align: top;
    padding-bottom: 1vw;
    padding-right: 0.5vw;
    width: 30%;
}
#frmDoc .disTbl td:nth-child(2){
    margin-left: 1vw;
    padding-bottom: 1vw;
    width: 70%;
    color: var(--darkBrown);
    text-align: left;
    font-size: 110%;
    padding-left: 0.5vw;
}
#frmDoc .frmSection .chkCon{
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 0.5vw;
    background-color: var(--lightBrown);
    border-radius: 7px;
    padding: 1vw;
}

#frmDoc .chkCon input{
    width: 5%;
    font-size: 130%;
    cursor: pointer;
}
#frmDoc .chkCon p{
    width: 95%;
    padding-left: 0.5vw;
}

#frmDoc .hunPerSpecieCon{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
}
#frmDoc .hunPerSpecieCon .specieItem{
    display: flex;
    flex-flow: row nowrap;
    padding: 0.5vw 1vw 0.5vw 1vw;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5vw;
    background-color: var(--yellow);
    color: var(--white);
    font-size: 130%;
}
#frmDoc .hunPerSpecieCon .specieItem img{
    content: url("../img/icoDelete.png");
    height: 2vw;
    max-height: 20px;
    cursor: pointer;
}
#frmDoc .hunPerAddSpecie{
    margin-top: 1vw;
}

#frmDoc .phRegSpecieTbl{
    background-color: var(--lightBrown);
}
#frmDoc .phRegSpecieTbl tbody{
    padding: 0.2vw;
}
#frmDoc .phRegSpecieTbl td{
    width: 50%;
    padding: 0.3vw 0.3vw 0.3vw 0.3vw;
}
#frmDoc .phRegSpecieTbl input{
    width: 95%;
    height: 25px;
    padding-left: 0.5vw;
}
#frmDoc .phRegBtnAddSpecie{
    margin-top: 1vw;
    cursor: pointer;
}

/*FORM PRODUCT DIP AND SHIP*/

#frmProdDipSec th{
  text-align: left;
  font-size: 120%;
  padding: 5px 0;
}
#frmProdDipSec td{
  text-align: left;
  font-size: 120%;
  padding-left: 10px;
}
#frmProdDipSec th:last-of-type{
  text-align: right;
  font-size: 120%;
}
#frmProdDipSec td:last-of-type{
  text-align: right;
  font-size: 120%;
  padding-left: 10px;
}
#frmProdDipSec td input{
  padding: 7px 12.12px;
  border-radius: 7px;
  width: 70px;
  font-size: 110%;
  margin-bottom: 5px;
}


/*FORM DISPATCH*/
#frmDis .gItems div{
    width: 49%;
    height: 3vw;
    max-height: 30px;
}
#frmDis .itemCon{
    border: 1px solid var(--cardBorder);
    padding: 1vw;
    margin-bottom: 0.4vw;
    display: flex;
    flex-flow: column nowrap;
    background-color: var(--white);
    border-radius: 8px;
}
#frmDis .itemCon .item{
    display: flex;
    flex-flow: column nowrap;
    margin-bottom: 0.3vw;
    margin-top: 0.3vw;
    padding: 0.5vw 0.7vw;
    background-color: var(--lightBrown);
    cursor: pointer;
    color: var(--textPrimary);
    border-radius: 6px;
    transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
#frmDis .itemCon .item:hover{
    background-color: var(--inputBg);
}
#frmDis .itemCon .item.selected{
    background-color: rgba(251,183,49,0.08);
    box-shadow: inset 0 0 0 1px var(--brown);
    color: var(--brown);
}
#frmDis .item div{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

/*FORM REPORT VIEW*/
#frmReportView {
    height: 85vh;
    width: 80vw;
    text-align: center;
}
#frmReportView .repLinkCon{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 1vw;
    border-bottom: 1px solid var(--darkBrown);
}
#frmReportView .dinamicBtnCon{
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 10px;
}
#frmReportView .repBtnCon{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  gap: 20px;
}
#frmReportView .repBtn{
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  background-color: var(--green);
  border-radius: 7px;
  padding: 4px 7px;
  cursor: pointer;
}
#frmReportView .repBtn:hover{
  box-shadow: 0 0 5px black;
}
#frmReportView .repBtn img{
  width: 20px;
  margin-right: 7px;
}
#frmReportView .repBtn span{
  color: var(--white);
}

#frmReportView .repEmailInput{
    width: 100%;
    text-align: left;
}
#frmReportView .repEmailInput label{
    display: flex;
    flex-flow: column nowrap;
    font-weight: bold;
    text-align: left;
    font-size: 120%;
    width: 30%;
}
#frmReportView .repEmailInput input{
    padding: 0.5vw;
    font-family: 'roboto', sans-serif;
    font-size: 120%;
    font-weight: normal;
    border-radius: 7px;
    margin: 0.1vw 0 0.5vw 0;
}

#frmReportView .linkData{
    display: flex;
    flex-flow: column nowrap;
    width: 68%;
}
#frmReportView .linkData span{
    margin-bottom: 0.1vw;
    font-weight: bold;
    text-align: left;
    font-size: 120%;
}
#frmReportView .linkData textarea{
    padding: 0.5vw;
    border-radius: 7px;
    font-family: 'roboto', sans-serif;
}

#frmReportView .iFrame{
    width: 100%;
    height: 100%;
    overflow: scroll;
}

/*frmRegTV*/
#frmRegTV .frmBody{
    padding: 10px;
}

/*APP VIEW*/
#appView{
    display: flex;
    height: 100%;
    width: 100%;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    overflow: hidden;
}
#appView .mainHeader{
    padding: 0.8vw 1vw 0.8vw 1vw;
    position: sticky;
    top: 0;
    color: var(--white);
    background-color: var(--darkBrown);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 120%;
    font-weight: bolder;
    width: 100%;
}
#appView .mainHeader img{
    height: 25px;
    display: none;
}
#appView .mainHeader .headerSide{
    width: 5%;
    min-width: 25px;
    position: relative;
}
#appView .mainHeader .desc{
    font-size: 130%;
    font-weight: bold;
}
#appView .frmCon{
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--lightBrown);
    overflow: hidden;
}




@media only screen and (min-width: 1300px) {
body{
    font-size: 14px;
}

}

@media only screen and (max-width: 1000px) {

#toolTip{
    font-size: 16px;
}

#appView{
    display: flex;
    height: 100%;
    width: 100%;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    overflow: hidden;
}
#appView .mainHeader{
    padding: 0.8vw 1vw 0.8vw 1vw;
    position: sticky;
    top: 0;
    color: var(--white);
    background-color: var(--darkBrown);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 130%;
    font-weight: bolder;
    width: 100%;
}
#appView .mainHeader img{
    height: 25px;
    display: none;
}
#appView .mainHeader .headerSide{
    width: 5%;
    min-width: 25px;
    position: relative;
}
#appView .mainHeader .desc{
    font-size: 130%;
    font-weight: bold;
}
#appView .frmCon{
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: var(--lightBrown);
}

#fullView{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    min-height: 100vh;
    padding: 4vh 5vw;
    box-sizing: border-box;
    background-color: var(--lightBrown);
}
/* #frmLogin overrides removed 2026-05-15 — the desktop dark-theme rules (around line 948) apply across all viewports now. */

#dataList{
    font-size: 18px;
}

.gFrmLabel{
    display: block;
}
/* .gFrmLabel input override removed 2026-05-15 — its `font-size: 90%` (of an already-tiny 1vw body) shrank the login placeholder to ~7px and clipped it. The main .gFrmLabel input rule (~line 390) handles all viewports correctly now. */
.gFrmLabel select{
    margin-bottom: 5px;
    height: 40px;
    width: 100%;
    padding-left: 5px;
    font-size: 90%;
}

.gFrmLabel .gAddShort{
    width: 50%;
}
.gFrmLabel .gAddZip{
    width: 20%;
}

.gFrmSelect{
    height: 30px;
}

.gFrmTextArea{
    padding: 5px;
    width: calc(100% - 10px);
}


.gSearchItemCon{
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: var(--white);
    margin-top: 10px;
    border-radius: 7px;
    box-shadow: 1px 1px 3px grey;
}
.gSearchItemCon .leftDiv{
    text-align: left;
}
.gSearchItemCon div span{
    display: block;
    font-weight: bold;
}

.gSearchItemCon .rightDiv{
    text-align: right;
}
.gSearchItemCon .rightDiv span{
    text-align: right;
}
.gSearchItemCon .topText{
    color: var(--darkBrown);
    font-size: 120%;
}
.gSearchItemCon .bottomText{
    color: var(--brown);
}

#imgView .mainImg{
    max-height: 90vh;
    max-width: 100vw;
}
#imgView .prevBtn{
    position: absolute;
    top: 0;
    left: 0;
    height: 10vw;
    z-index: 2;
    margin-left: 0vw;
    cursor: pointer;
    opacity: 0.7;
}
#imgView .nextBtn{
    position: absolute;
    top: 0;
    right: 0;
    height: 10vw;
    z-index: 2;
    margin-right: 0vw;
    cursor: pointer;
    opacity: 0.7;
}


/* .gFullFrm width: 90vw and 100x100 logo overrides removed 2026-05-15 — caused tiny form on desktop and squashed the wide Idermy logo. The main .gFullFrm rule (max-width 540px, width 100%) already adapts to narrow viewports. */

}