/* Global Customization for Backpack */

:root {
    /* Tailwind Font size */
    --tw-body-font-size: 1.125rem;

    --tblr-body-font-size: var(--tw-body-font-size);

    --tblr-font-size-h1: 3rem;
    --tblr-line-height-h1: 4rem;

    /* Firefox shows bold only from 600, Chrome already from 500 */
    --tblr-font-weight-bold: 600;

    --tblr-nav-link-font-size: var(--tw-body-font-size);
    --tblr-nav-link-font-weight: 400;
    --tblr-dropdown-font-size: 1rem;

    --tblr-spacer-4: 3rem;
    --tblr-spacer: 2rem;

    /* Tailwind Colors */
    --tw-indigo-950: #1e1b4b;
    --tw-indigo-950-rgb: 30, 27, 75;
    --tw-indigo-600: #4f46e5;
    --tw-indigo-600-rgb: 79, 70, 229;
    --tw-indigo-500: #6366f1;
    --tw-indigo-500-rgb: 99, 102, 241;
    --tw-blue-50: #eff6ff;
    --tw-blue-50-rgb: 239, 246, 255;

    --tblr-primary: var(--tw-indigo-600);
    --tblr-primary-rgb: var(--tw-indigo-600-rgb);

    /* --tblr-success: #4f46e5;
    --tblr-success-rgb: 79, 70, 229; */

    --tblr-secondary: var(--tw-indigo-950);
    --tblr-secondary-rgb: var(--tw-indigo-950-rgb);
    --tblr-secondary-fg: white;

    /* color: var(--tblr-body-color); */

    --tblr-link-color: var(--tw-indigo-600);
    --tblr-link-color-rgb: var(--tw-indigo-600-rgb);

    --tblr-link-hover-color: var(--tw-indigo-500);
    --tblr-link-hover-color-rgb: var(--tw-indigo-500-rgb);

    --tblr-heading-color: var(--tblr-primary);

    --tblr-border-radius: .25rem;



   /* solid colors */
    --app-primary: var(--tw-indigo-600);
    --app-violet:  #7A5CFF;
    --app-sky:     #3F9CE8;
    --app-sea:     #5AC9C5;
    --app-orange:  #FFB347;
    --app-green:   #2CCB7C;
    --app-red:     #FF6B6B;

    /* text on bg */
    --app-light: #ffffff;
    --app-dark:  #ffffff;

    /* same colors as RGB for rgba() */
    --app-primary-rgb: 79, 86, 229;
    --app-violet-rgb:  122, 92, 255;
    --app-sky-rgb:     63, 156, 232;
    --app-sea-rgb:     90, 201, 197;
    --app-orange-rgb:  255, 179, 71;
    --app-green-rgb:   44, 203, 124;
    --app-red-rgb:     255, 107, 107;
    
}




/* solid backgrounds (your original idea) */
.bg-primary{background-color:var(--app-primary)!important;color:var(--app-light)!important;}
.bg-violet{background-color:var(--app-violet)!important;color:var(--app-light)!important;}
.bg-sky{background-color:var(--app-sky)!important;color:var(--app-light)!important;}
.bg-sea{background-color:var(--app-sea)!important;color:var(--app-dark)!important;}
.bg-orange{background-color:var(--app-orange)!important;color:var(--app-dark)!important;}
.bg-green{background-color:var(--app-green)!important;color:var(--app-dark)!important;}
.bg-red{background-color:var(--app-red)!important;color:var(--app-dark)!important;}

/* translucent / “soft” versions for buttons, tabs, badges */
.bg-soft-primary{background-color:rgba(var(--app-primary-rgb), .12)!important;color:var(--app-primary)!important;}
.bg-soft-violet{background-color:rgba(var(--app-violet-rgb), .12)!important;color:var(--app-violet)!important;}
.bg-soft-sky{background-color:rgba(var(--app-sky-rgb), .12)!important;color:var(--app-sky)!important;}
.bg-soft-sea{background-color:rgba(var(--app-sea-rgb), .14)!important;color:var(--app-sea)!important;}
.bg-soft-orange{background-color:rgba(var(--app-orange-rgb), .14)!important;color:var(--app-orange)!important;}
.bg-soft-green{background-color:rgba(var(--app-green-rgb), .12)!important;color:var(--app-green)!important;}
.bg-soft-red{background-color:rgba(var(--app-red-rgb), .12)!important;color:var(--app-red)!important;}





/* text-only */
.text-primary { color: var(--app-primary) !important; }
.text-violet  { color: var(--app-violet) !important; }
.text-sky     { color: var(--app-sky) !important; }
.text-sea     { color: var(--app-sea) !important; }
.text-orange  { color: var(--app-orange) !important; }
.text-green   { color: var(--app-green) !important; }
.text-red     { color: var(--app-red) !important; }

/* pale backgrounds (outline style) */
.bg-text-primary{background-color:var(--app-light)!important;}
.bg-text-violet{background-color:var(--app-light)!important;}
.bg-text-sky{background-color:var(--app-light)!important;}
.bg-text-sea{background-color:var(--app-dark)!important;}
.bg-text-orange{background-color:var(--app-dark)!important;}
.bg-text-green{background-color:var(--app-dark)!important;}
.bg-text-red{background-color:var(--app-dark)!important;}


.btn.bg-soft-primary:hover {
    background-color: rgba(var(--app-primary-rgb), .2) !important;
    color: var(--app-primary) !important;
}

.border-primary {
    border-color: var(--tblr-primary) !important;
}

/* For Bootstrap/Tabler Login/Register FE Page */
.tw-gradient {
    /* TW Gradient: bg-gradient-to-b from-white via-slate-50 to-white */
    background: linear-gradient(to bottom, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
}

.tblr-body-color {
    color: var(--tblr-body-color) !important;
}

.tblr-body-font-size {
    font-size: var(--tblr-body-font-size) !important;
}

/* TBLR class font-weight-bold = strong */
/* .strong, b, strong {
    font-weight: var(--tblr-font-weight-bold);
} */

.input-group-text {
    font-size: var(--tw-body-font-size);
}

.pagination {
    --tblr-pagination-font-size: var(--tw-body-font-size);
}

/* Button-Padding explizit im Button-Scope setzen */
.btn-lg {
    --tblr-btn-padding-x: 1.5rem;
    --tblr-btn-padding-y: .5rem;
    --tblr-btn-font-weight: 400;
    --tblr-btn-line-height: 2rem;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    border-color: var(--tblr-btn-active-bg);
}

/* html {
    font-size: 1.125rem !important;
} */

/* Icons vertically aligned middle */
/* i::after, i::before {
    line-height: 1.125;
    font-size: 1.125rem
} */

.va-middle { vertical-align:middle; }

/* h1 {
    font-size: 3rem;
    line-height: 4rem;  
} */

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: var(--tblr-body-font-weight);
    color: var(--tblr-heading-color);
}

/* [bp-section=page-heading] {
    display: inline-block;
    background: rgba(var(--tblr-primary-rgb), .16);
    padding: 0 1rem;
    border-left: 10px solid var(--tblr-primary);
} */

.small, small {
    font-size: .9rem;
}

label {
    font-weight: var(--tblr-font-weight-bold);
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}


.badge {
    --tblr-badge-font-size: 1rem;
}

.badge-lg {
    padding: .75rem 1.5rem;
    font-size: var(--tblr-body-font-size);
}

/* Right BE Content Area */
.page-wrapper {
    background-color: #efeeff;
    background: radial-gradient(1200px 600px at 80% -10%, rgba(111,93,255,0.20), transparent 60%), linear-gradient(180deg, #f3f1ff 0%, #f6f7ff 100%);
}

/* .row {
    margin:0;
} */


/* Left main menu */
.navbar {
    --tblr-navbar-active-color: var(--tblr-primary);
    --tblr-navbar-active-bg: rgba(var(--tblr-primary-rgb), 0.06);
}

.navbar-nav {
    font-size: 18px !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--tblr-navbar-active-color);
    font-weight: var(--tblr-font-weight-bold);
}

aside a.dropdown-item.active {
    background: rgba(var(--tblr-primary-rgb), 1) !important;
    color: #ffffff !important;
    font-weight: var(--tblr-font-weight-bold);
}

.navbar-vertical.navbar-expand-lg {
    padding-right: 1rem !important;
    scrollbar-width: none !important;
}

.nav-pills .nav-link.active {
    background-color: var(--tblr-primary) !important;
    color: #ffffff !important;
}

aside li.nav-item a.nav-link i, aside div.dropdown-menu a.dropdown-item i, header.top div ul.navbar-nav li.nav-item a.nav-link i, header.top div.dropdown-menu a.dropdown-item i {
    margin-right: 10px;
    font-size: inherit !important;
}


/* Save/Cancel/Delete Buttons under Forms */
#saveActions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

/* Dashboard */
a.card:hover {
    background: rgba(var(--tblr-primary-rgb), 0.1) !important;
}

a.card.bg-primary:hover {
    background-color: var(--tblr-link-hover-color) !important;
}

[bp-section="crud-operation-create"], [bp-section="crud-operation-update"] {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    /* background-color: #ffffff;
    border: 0;
    border-radius: 1rem;
    padding: 3rem; */
}


/* Add a bit of spacing between the icon and text */
.dropdown-item svg {
    margin-right: 8px;
    vertical-align: middle;
}

/* Adjust icon size if necessary */
.dropdown-item svg.icon-1 {
    width: 18px;
    height: 18px;
}

.dropdown-menu {
    --tblr-dropdown-font-size: 1rem;
}

.dropdown-menu-columns.active {
    background: var(--tblr-navbar-active-bg);
}

table {
    font-size: var(--tblr-body-font-size);
}

/* .table, #crudTable {
    background-color: #ffffff;
} */

.table thead th, .table tfoot th, #crudTable thead th, #crudTable tfoot th {
    font-size: var(--tblr-body-font-size);
    /* font-weight: var(--tblr-font-weight-bold) !important; */
    color: black !important;
    text-transform: none !important;
    align-items: center !important;
    white-space: normal !important;
    word-wrap: break-word;
}

#crudTable tr th:first-child, #crudTable tr td:first-child, #crudTable table.dataTable tr th:first-child, #crudTable table.dataTable tr td:first-child {
    /* padding-top: .75rem;
    padding-bottom: .75rem; */
    padding-left: 1rem;
}

.markdown>table>:not(caption)>*>*, .table>:not(caption)>*>* {
    padding: 1rem;
}

.table thead th, .table tfoot th {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#crudTable_wrapper {
    padding: 0;
    background: white;
    border-radius: 0;
}

/* Page Job Create */
div.tab-container div.tab-content {
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) var(--tblr-border-radius);
}

/* Card-Spacing explizit im Card-Scope setzen */
.card, .card .card-body {
  --tblr-card-spacer-x: 1rem;
  --tblr-card-spacer-y: 1rem;
  --tblr-card-border-radius: 1rem;
}

/* ab sm (Bootstrap/Tabler: >= 576px) -> 1.5rem */
@media (min-width: 576px) {
  #crudTable_wrapper {
    padding: 1.5rem;
    border-radius: .75rem;
  }

  /* Page Job Create */
div.tab-container div.tab-content {
    padding: 1.5rem;
}

/* Card-Spacing explizit im Card-Scope setzen */
.card, .card .card-body {
  --tblr-card-spacer-x: 1.5rem;
  --tblr-card-spacer-y: 1.5rem;
}
}

/* ab md (>= 768px) -> 3rem */
@media (min-width: 768px) {
  #crudTable_wrapper {
    padding: 3rem;
    border-radius: 1rem;
  }

  /* Page Job Create */
div.tab-container div.tab-content {
    padding: 3rem;
}

/* Card-Spacing explizit im Card-Scope setzen */
.card, .card .card-body {
  --tblr-card-spacer-x: 3rem;
  --tblr-card-spacer-y: 3rem;
}
}


.card-table tr td:first-child, .card-table tr th:first-child {
    padding-left:0.75rem;
    border-left: 0;
}

/* [bp-field-name="contact_person_section"], [bp-field-name="verification_info_section"] , [bp-field-name="job_posting_settings_separator"], [bp-field-name="general_settings_separator"]{
    margin-top: 1rem;
} */

.iti {
    display: block;
}

/* ------------------- TABS ------------------------ */
.nav {
    gap: .25rem;
}

.nav-tabs .nav-link {
    /* border: 1px solid #dee2e6;
    border-bottom: none; */
    font-weight: 600;
    border-radius: 5px 5px 0 0;
    padding: 0.75rem 1.5rem;
    background-color: #e2e1ff;
    transition: background-color 0.3s, color 0.3s;
    color: var(--tblr-secondary);
    cursor: pointer;
    border-bottom: none !important;
}

.nav-tabs .nav-link:hover {
    background-color: #e9ecef;
    color: #000000;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: var(--tblr-primary);
    font-weight: 700;
    border-color: #dee2e6 #dee2e6 #ffffff;
    /* box-shadow: inset 0 -3px 0 var(--tblr-primary); */
}

/* Only Application Status Bar */
.nav-link.status-btn.active {
    border-color: white;
}

.nav-link.status-btn {
    border-style: solid;
    border-width: 1px 1px 0 1px;
    border-color: currentColor;
}


/* Page Applicant List */
div.tab-container #crudTable_wrapper {
    border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) var(--tblr-border-radius);
}


/* Page Job List - own badge class */
.application_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--tblr-primary);
    background-color: transparent;
    color: var(--tblr-primary);
    font-weight: 600;
    font-size: 1.5rem; /* tabler class fs-1 */
    text-decoration: none;
}

.application_count:hover {
    background: var(--tw-indigo-950);
    border: 1px solid var(--tw-indigo-950);
    color: white;
    text-decoration: none;
}


/* ------------------- Form Elements ------------------------ */
div.row div.form-group {
    padding-bottom: 1rem;
}

.form-control, .form-select {
    font-size: var(--tblr-body-font-size);
    padding: .75rem .9rem;
    border-radius: var(--tblr-border-radius) !important;
}

.form-control:focus,
.form-select:focus
 {
    border-color: var(--tblr-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(125, 90, 206, 0.15) !important;
}

textarea.form-control {
    min-height: 10rem;
}

.input-group:focus-within .input-group-text {
    border-color: var(--tblr-primary) !important;
    background-color: rgba(125, 90, 206, 0.1) !important;
}

.selected {
    background: linear-gradient(45deg, var(--tblr-primary), #6f4eb8) !important;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D5ACE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.custom-select:hover {
    border-color: var(--tblr-primary) !important;
}


.form-label {
    margin-bottom: unset;
    font-size: unset;
}

.form-select-sm {
    padding-top: unset;
    padding-bottom: unset;
    padding-left: unset;
    font-size: var(--tblr-body-font-size);
    border-radius: var(--tblr-border-radius);
    padding: .4375rem 2.25rem .4375rem .75rem;
}

/* Radio Buttons */
.form-check-inline {
    display: inline-flex;
    margin-right: 3rem;
    align-items: center;
    gap: .5rem;
}

.form-check-label {
    font-weight: var(--tblr-body-font-weight);
}

/* TOGGLE Control Resets */
label.switch-label {
    padding-top: unset;
}

.form-switch.switch {
    width: unset;
    height: unset;
    margin-right: .5rem;
}

/* 
.form-switch {
    padding-left: unset;
}
*/

.switch-input.form-check-input {
    width: 2em;
    height: 1.125em;
}

.form-switch .form-check-input {
    width: 2em;
    height: 1.125em;
    /* margin-left: unset; */
    zoom: 1.125;
    cursor: pointer;
    /* margin-top: 0px !important; */
}

[bp-field-type="switch"] label {
    padding-top: 0;
    padding-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

/* .form-check .form-check-input {
    margin-left: unset;
}

.form-check {
    min-height: unset;
    padding-left: unset;
} */

/* .form-check-input[type=checkbox] {
    height: 1.125rem;
    width: 1.125rem;
    margin-right: .5rem;
} */


.form-check-input[type=radio] {
    flex-shrink: 0;
}

/* LOGIN/REGISTER Page */
.input-group-flat .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Form Blocks w small text */
form .help-block, .invalid-feedback, .form-text {
    font-size: .95rem;
}

.alert {
    margin: 2rem 0;
}

/* Logo/Banner Upload Preview Box */
.img-thumbnail {
    background-color: unset;
    box-shadow: unset;
    max-height: 150px;
    max-width: 100%;
    width: auto;
}

/* [bp-field-name="logo_display"] .img-thumbnail {
    gets overwritten in blade! (logo variant)
} */

[bp-field-name="banner_display"] .img-thumbnail, [bp-field-name="job_image_display"] .img-thumbnail {
    /* 800x300px */
    aspect-ratio: 2.67;
    object-fit: cover;
}

.backstrap-file-input {
    cursor: pointer;
}

/* Design Resets Company Industries/Job Category/Working Times Select Boxes etc. */

/* Full width like .form-control */
.select2-container { width: 100% !important; }

form .select2.select2-container {
    border-radius: var(--tblr-border-radius);
    padding: .25rem;
}

/* Custom Questions Feature */
form [bp-field-name="card_questions_open"] .select2.select2-container {
    padding: .75rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tblr-border-color);
    border: none;
    font-size: var(--tblr-body-font-size);
    padding: .5rem .7rem;
    border-radius: var(--tblr-border-radius);
}

.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single {
    border: none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tblr-primary);
}

/* Right Arrow vertical middle */
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 50%;
    right: .75rem;
    /* margin-top: -13px; */
    transform: translateY(-50%);
}

/* Focus/active styles to match .form-control focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
    border-color: var(--tblr-primary);
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}


/* Logo Login/Register Pages */
.auth-logo {
  height: 3rem;
  width: auto;
}

@media (min-width: 768px) {
  .auth-logo {
    height: 4rem;
  }
}


  .text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .tooltip {
    --tblr-tooltip-zindex: 1080;
    --tblr-tooltip-max-width: 250px;
    --tblr-tooltip-padding-x: var(--tblr-spacer-2);
    --tblr-tooltip-padding-y: var(--tblr-spacer-2);
    --tblr-tooltip-font-size: 1.125rem;
    --tblr-tooltip-color: #fff;
    --tblr-tooltip-bg: var(--tblr-primary);
    text-align: left !important;
}

.modal-header {
    padding: .75rem 3.5rem .75rem 1.5rem;
    position: relative;
}

.modal-title {
    font-size: 2rem;
}

.modal-content .btn-close {
  top: 50%;
  transform: translateY(-50%);
}

/* .kbd, kbd {
    font-size: var(--tblr-body-font-size);
} */

.accordion-button {
    font-size: var(--tblr-body-font-size);
}

/* .accordion-button:not(.collapsed) {
    font-weight: var(--tblr-body-font-weight);
} */