.gold-color {
    color: #ffd700;
}

.amber-color {
    color: #FDBA3A !important;
}

.warning-color {
    background: #ffb6b661 !important;
}


#main-wrapper, #kt_app_root, #content-wrapper, .durandal-wrapper {
    height: 100%
}

.fa-spin-2x {
    animation-name: fa-spin;
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
    font-size: 2em !important;
}

/*-=-=-==-=-=-=-=-=-=-=-SPLASH SCREEN ANIMATION-=-=-=-=-=-=-=-=-=-=-*/
.MBanimate {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}


.splash {
    text-align: center;
    margin: 10% 0 0 0;
}

    .splash .message {
        font-size: 5em;
        line-height: 1.5em;
        -webkit-text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
        text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
        text-transform: uppercase;
    }

    .splash .icon-spinner {
        text-align: center;
        display: inline-block;
        font-size: 5em;
        margin-top: 50px;
    }

    /* project detials tab animation */

@keyframes background-fade {
    0% {
        background-color: rgb(217, 217, 217);
    }

    100% {
        background-color: none;
    }
}

.projectTab.animating {
    animation: background-fade 1s;
}


.line-image {
    background-size: cover; /* Ensure the background image covers the full div */
    border: 1px solid #ccc; /* Optional: for visual clarity */
    position: relative;
}

#lineImageDropzone {
    height: 100%;
    width: 100%;
    background: transparent;
}

.form-check-modalEditContact {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #333;
}

.form-check-input-modalEditContact {
    margin-top: 0;
    margin-right: 0.5rem;
}

input:disabled {
    cursor: not-allowed;
}

.in-progress-status {
    color: rgb(19, 222, 185);
    background-color: rgb(19, 222, 185, 0.1);
    padding: 0.6rem;
    border-radius: 1rem
}

.in-line-status {
    color: rgb(93, 135, 255);
    background-color: rgb(93, 135, 255, 0.1);
    padding: 0.6rem;
    border-radius: 1rem
}

.on-hold-status {
    color: rgb(255, 174, 31);
    background-color: rgb(255, 174, 31, 0.1);
    padding: 0.6rem;
    border-radius: 1rem
}

.action-button {
    background: none;
    border: none;
    font-size: 18px;
}

    .action-button:hover {
        border-radius: 2rem !important;
    }

.placeOnHold {
    color: rgb(255, 174, 31) !important;
}

    .placeOnHold:hover {
        background-color: rgb(255, 174, 31, 0.1) !important;
    }

.endProcessing {
    color: rgb(93, 135, 255) !important;
}

    .endProcessing:hover {
        background-color: rgb(93, 135, 255, 0.1) !important;
    }

.cancelCheckin {
    color: rgb(250, 137, 107) !important;
}

    .cancelCheckin:hover {
        background-color: rgb(250, 137, 107, 0.1) !important;
    }

.startProcessing {
    color: rgb(19, 222, 185)!important;
}

    .startProcessing:hover {
        background-color: rgb(19, 222, 185, 0.1) !important;
    }

.noShow {
    color: rgb(73, 190, 255) !important;
}

    .noShow:hover {
        background-color: rgb(73, 190, 255, 0.1) !important;
    }
.fa-big {
    font-size: 18px !important;
}

.custom-text-wrap {
    max-width: 200px;
    white-space: normal !important;
    word-break: break-word;
    word-wrap: break-word;
}

.menu-not-implemented {
    display: none;
}


.project-profit-loss {
    background-color: white;
    padding: 10px;
    width: 100%;
}

.proft-loss-header-section {
    text-align: center;
}

.proft-loss-income-section, .proft-loss-expense-section, .proft-loss-total-section {
    text-align: center;
    margin-top: 20px;
}
 
.profit-loss-table {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}

.profit-loss-table-label {
    width: 200px;
    text-align: left;
}

.profit-loss-line-above {
    border-top: 1px solid black;
}

.profit-loss-table-value {
    width: 75px;
    text-align: end;
    /*background-color: greenyellow;*/
}

.subnav-link.active, .subnav-link:active, .subnav-link:hover, .subnav-link:focus {
    color: var(--bs-text-warning);
    border-bottom: 1px solid var(--bs-text-warning) !important;
}

.open-contact-detail {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-weight: bold;
}

.open-contact-detail:hover {
    color: var(--bs-text-primary);
    /*    background-color: #e9ecef;
    border-radius: 4px;*/
}

.crm-chat-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    font-family: "Segoe UI", sans-serif;
}

.crm-message-wrapper {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}

.crm-message-wrapper.crm-user {
    flex-direction: row;
}

.crm-message-wrapper.crm-agent {
    flex-direction: row-reverse;
}

.crm-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 10px;
}

.crm-message-body {
    max-width: 70%;
}

.crm-meta {
    font-size: 0.85em;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    color: #888;
}

.crm-meta-left {
    flex-direction: row;
}

.crm-meta-right {
    flex-direction: row;
}

.crm-sender {
    font-weight: bold;
    color: #2e7d32;
}

.crm-timestamp {
    font-style: italic;
    margin: 0 10px;
}

.crm-bubble {
    background: #e1f5fe;
    color: #000;
    padding: 12px 16px;
    border-radius: 12px;
    word-wrap: break-word;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.crm-message-wrapper.crm-agent .crm-bubble {
    background: #e0f2f1;
}

.crm-email {
    background-color: #fff3e0 !important;
    border-left: 4px solid #ffb74d;
}

.crm-icon {
    margin-right: 8px;
    color: #666;
}

.crm-icon-right {
    margin-left: 8px;
    color: #666;
}

.crm-chat-input-block {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 15px;
}

.crm-chat-input {
    display: flex;
    align-items: flex-start;
    padding-top: 5px;
    gap: 10px;
}

.crm-textarea {
    flex: 1;
    min-height: 60px;
    resize: none;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    background-color: #f9f9f9;
}

#crmDropzone:hover {
    background-color: #eef6ff;
    border-color: #5D87FF;
    transition: all 0.2s ease-in-out;
}

.menu-link.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

#ContactImageDropzone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#ContactImageDropzone img {
    pointer-events: none;
}

#ContactImageDropzone .dz-message {
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

    #ContactImageDropzone .dz-preview .dz-details,
    #ContactImageDropzone .dz-preview .dz-filename,
    #ContactImageDropzone .dz-preview .dz-size,
    /*#ContactImageDropzone .dz-preview .dz-progress,*/
    #ContactImageDropzone .dz-preview .dz-error-message,
    #ContactImageDropzone .dz-preview .dz-success-mark,
    #ContactImageDropzone .dz-preview .dz-error-mark {
        display: none !important;
    }

.symbol-100px {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50%;
    border: solid 3px #17a2b8;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

.symbol-100px img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 1%;
    display: block;
}

.symbol-150px {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
    border: solid 3px #17a2b8;
    overflow: hidden;
    display: inline-block;
    position: relative;
}

    .symbol-150px img {
        width: 150px !important;
        height: 150px !important;
        object-fit: cover !important;
        border-radius: 1%;
        display: block;
    }

.object-fit-cover {
    object-fit: cover;
}


.custom-tooltip {
    --bs-tooltip-bg: #f9f9f9;
    --bs-tooltip-color: #000;
    z-index: 9999;
}

.custom-tooltip-title {
    background-color: rgba(0, 0, 0, .06);
    border-bottom-color: #ddd;
    border-radius: 0;
    margin: 0;
    padding: 8px 14px;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 18px;
    background-color: #F7F7F7;
    border-bottom: 1px solid #EBEBEB;
    /*border-radius: 5px 5px 0 0;*/
}


.custom-tooltip-grid-container {
    display: grid; /* Enables CSS Grid Layout */
    grid-template-columns: 80px 300px;
    grid-gap: 5px; /* Adds spacing between grid items */
}

.custom-tooltip-grid-item-1 {
    text-align: right; /* Centers text within each item */
}
.custom-tooltip-grid-item-2 {
    text-align: left; /* Centers text within each item */
    font-weight: 700;
}

.tooltip-inner {
    max-width: 400px;
}


.my-large-badge {
    font-size: 1.0rem;
    padding: 0.3em 1em;
}

.border-box {
    /*border: solid 1px #aaa;*/
    background-color: #ccc;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 30px;
    padding: 5px;
}


/* propover tooltips on calendars */

/*.popover-table-col-1 {
    width: 20%;
}
.popover-table-col-2 {
    font-weight: 700;
}

.tooltip-popover {
    margin-top: 10px;
    min-width: 400px;
    position: absolute;
    z-index: 9999 !important;
    overflow: visible;
}

.tooltip-popover-arrow {
    z-index: 9999;
}
*/
/* kyle's classes below */

.popover {
    border: 3px solid rgba(0, 0, 0, .2);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.popover-title {
    background-color: rgba(0, 0, 0, .06);
    border-bottom-color: #ddd;
    border-radius: 0;
    margin: 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    background-color: #F7F7F7;
    border-bottom: 1px solid #EBEBEB;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

.popover.bottom > .arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    top: -11px;
}

.popover > .arrow, .popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover.bottom .arrow:after {
    border-bottom-color: #C8C5C5;
    border-width: 0 8px 7px 8px;
    top: 1px;
}

.popover.bottom > .arrow:after {
    content: " ";
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #C8C5C5;
}

.text-slim {
    font-weight: 300 !important;
}

.fc-event {
    min-height: 30px;
    white-space: normal;
}

.hand-cursor {
    cursor: pointer;
}

@media (min-width: 576px) {
    table.dataTable td.dt-control,
    table.dataTable th.dt-control {
        display: none;
    }
}

.calendar-event-gray, .badge-gray {
    color: #fff !important;
    background-color: #666 !important;
}

.calendar-event-gray:hover {
    color: #333 !important;
}

.validationMessage {
    color: #e14430;
}

.webix_layout_line {
    border-top-right-radius: 0.95rem;
    border-top-left-radius: 0.95rem;
}

.webix_kanban_editor {
    border-radius: 0.95rem;
}

.webix_kanban.webix_layout_space {
    border-bottom-left-radius: 0.95rem;
    border-bottom-right-radius: 0.95rem;
}

.cyan-status, .info2-status {
    color: rgb(19, 222, 185);
    background-color: rgb(19, 222, 185, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.blue-status, .primary-status {
    color: rgb(93, 135, 255);
    background-color: rgb(93, 135, 255, 0.1);
    padding: 0.6rem;
    border-radius: 1rem
}

.brown-status, .warning-status {
    color: rgb(255, 174, 31);
    background-color: rgb(255, 174, 31, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.green-status, .success-status {
    color: rgb(46, 204, 113);
    background-color: rgba(46, 204, 113, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.red-status, .danger-status {
    color: rgb(233, 79, 134);
    background-color: rgba(233, 79, 134, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.purple-status, .info-status {
    color: rgb(155, 89, 182);
    background-color: rgba(155, 89, 182, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.dark-status, .gray-status {
    color: rgb(255, 255, 255);
    background-color: rgb(190,190,190);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.light-status {
    color: rgb(125, 125, 125);
    background-color: rgb(240, 240, 240);
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}


#global-alert {
    position: sticky;
    top: 0;
    z-index: 1050; /* above header */
}
.notice-full {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}
.notice-full.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

/* measurement clone: explicitly disable clamp */
.notice-full-measure {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}

.splash-logo {
    max-width: 400px;
    width: 100%;
}

@media (max-width: 767px) {
    .splash-logo {
        max-width: 200px;
    }
}

.eventRegistrationContent div {
    text-align: left !important;
    margin-left: 0;
}

.eventRegistrationContent img {
    max-width: 100% !important;
    height: auto;
    display: block;
}

/* ====== Theme tokens just for this component ====== */
.dc-controls{
    --dc-bg: #f6f2ea;        /* light “cream” background like the screenshot */
    --dc-border: #e7e2d8;    /* soft border */
    --dc-text: #2b2b2b;
    --dc-placeholder: #9c9588;
    --dc-focus: #7fdbe6;     /* cyan-ish focus outline that matches your tags */
    --dc-radius: 9999px;     /* full pill */
    --dc-h: 44px;            /* touch friendly height */
    --dc-padX: 14px;
}

/* Sticky container (unchanged except spacing) */
.controls-sticky{
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 0px);
    z-index: 10;
    backdrop-filter: blur(6px);
    padding: .5rem;
    margin: -.5rem -.5rem .5rem -.5rem;
}

/* === Search pill === */
.dc-search{
    position: relative;
    display: flex;
    align-items: center;
    background: var(--dc-bg);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius);
    height: var(--dc-h);
    padding-left: 40px; /* room for icon */
    padding-right: 34px; /* room for clear button */
}
.dc-icon{
    position: absolute;
    left: 14px;
    opacity: .8;
    fill: var(--dc-placeholder);
}
.dc-input{
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--dc-text);
    font-size: 16px; /* avoid iOS zoom */
    min-height: var(--dc-h);
}
.dc-input::placeholder{ color: var(--dc-placeholder); }
.dc-clear{
    position: absolute;
    right: 6px;
    border: 0;
    background: transparent;
    color: var(--dc-placeholder);
    font-size: 18px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.dc-search:focus-within{
    box-shadow: 0 0 0 3px rgba(127,219,230,.35);
    border-color: var(--dc-focus);
}

/* === Page size pill === */
.dc-pagesize{
    position: relative;
    display: inline-flex;
    align-items: center;
}
.dc-select{
    appearance: none;          /* remove native arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--dc-bg);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius);
    color: var(--dc-text);
    font-size: 16px;
    min-height: var(--dc-h);
    padding: 0 calc(var(--dc-padX) + 18px) 0 var(--dc-padX);
    cursor: pointer;
}
.dc-select:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(127,219,230,.35);
    border-color: var(--dc-focus);
}
/* custom caret */
.dc-caret{
    position: absolute;
    right: 12px;
    pointer-events: none;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--dc-placeholder);
}

/* Keep scope to this component only */
.dc-container button,
.dc-container .form-control,
.dc-container .form-select {
    min-height: var(--dc-h);
    font-size: 16px;
}

/* Keep these scoped */
.dc-controls .min-w-0{ min-width: 0; }
.dc-controls .dt-length{ flex: 0 0 auto; }

/* Compact rows */
.dc-compact .dc-row{
    border: 1px dashed #eee;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.dc-compact .dc-row:hover{ background: #fafafa; }

/* keep utilities local */
/* make the controls bar stick within the card body */
.dc-container .controls-sticky{
    position: sticky;
    top: 0;                 /* sticks to the top of the card body */
    z-index: 1;
    padding: .25rem 0;
}

/* Make the grid fill the *visual* viewport and center contents */
.swal2-container {
  display: grid !important;
  inset: 0 !important;                /* replaces top/right/bottom/left */
  height: 100dvh !important;          /* fixes iOS toolbar jumps */
  place-items: center !important;     /* center both axes */
}

/* Ensure the popup is actually centered inside the 'center' area */
.swal2-center > .swal2-popup {
  grid-area: center !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}

.projectImageFrame {
    width: 150px; /* fixed width */
    height: 150px; /* fixed height */
    overflow: hidden; /* hide overflow */
    position: relative; /* for absolute children if needed */
}

.projectImageFrame img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keeps aspect ratio */
}

/* Individual status colors */
.contactStatusColor-NewLead {
    color: rgb(52, 152, 219);
    background-color: rgba(52, 152, 219, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-Prospect {
    color: rgb(255, 174, 31);
    background-color: rgba(255, 174, 31, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-Client {
    color: rgb(46, 204, 113);
    background-color: rgba(46, 204, 113, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-Appt1 {
    color: rgb(233, 79, 134);
    background-color: rgba(233, 79, 134, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-Appt2 {
    color: rgb(93, 135, 255);
    background-color: rgba(93, 135, 255, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-Sale {
    color: rgb(0, 200, 83);
    background-color: rgba(0, 200, 83, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-NotInterested {
    color: rgb(231, 76, 60);
    background-color: rgba(231, 76, 60, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-FollowUp {
    color: rgb(241, 196, 15);
    background-color: rgba(241, 196, 15, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.contactStatusColor-Worker {
    color: rgb(155, 89, 182);
    background-color: rgba(155, 89, 182, 0.1);
    padding: 0.6rem;
    border-radius: 1rem;
}

.resource-job {
    background-color: white;
    border-color: black;
}

.resource-status-warning {
    background: #ffb6b661 !important;
}

.resource-job-header {
    background: #E2FAFF;
}

.resource-project-header {
    background: #41acd0;
}

.resource-header {
    background: #ffffed;
}

.resource-project-text {
    color: white;
}

.webix_menu .webix_win_content .webix_win_body {     /* This is to fix a bug in Webix, where the popup menus are not being given a height in our layout, breaking scroll. This issue is on version 10 and up. -Warner K */
    max-height: 180px;
}

.small-circle {
    height: 10px;
    width: 10px;
    background-color: var(--bs-danger);
    border-radius: 50%;
    display: inline-block;
}

a.clickable-link {
    color: rgb(33, 31, 28);
    text-decoration: none;
}

    a.clickable-link:hover {
        color: rgb(93, 135, 255);
    }

.crmFontColor {
    color: #0d6efd !important;
}

.crmFontColor a {
    color: #0d6efd !important;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.crmFontColor:hover, .crmFontColor:focus {
    color: #5f98ed !important;
}

.crmBGColor  {
    color:#FFF;
    background-color: #5D87FF !important;
}

.crmBGColor:hover, .crmBGColor:focus {
    color: #FFF;
    background-color: #5f98ed !important;
}

.right-border-line {
    position: relative;
}

.right-border-line::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #4FC9DA;
    border-radius: 2px;
}

/*-=-=-==-=-=-=-=-=-=-=-TIMELINE-=-=-=-=-=-=-=-=-=-=-*/

/* override default style */
.timeline-label .timeline-label {
    width: 145px !important;
    font-size: 13px !important;
}

.timeline-label:before {
    left: 146px !important;
}

    .timeline-desc {
        font-size: 13px !important;
    }


/*-=-=-==-=-=-=-=-=-=-=-PROJECT DETAILS CALENDAR-=-=-=-=-=-=-=-=-=-=-*/

.primary-soft {
    color: rgb(93, 135, 255) !important;
    background-color: rgba(93, 135, 255, 0.1) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .primary-soft .fc-event-title, .primary-soft .fc-event-time {
        color: rgb(93, 135, 255) !important;
    }

.secondary-soft {
    color: rgb(125, 125, 125) !important;
    background-color: rgb(240, 240, 240) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .secondary-soft .fc-event-title, .secondary-soft .fc-event-time {
        color: rgb(125, 125, 125) !important;
    }

.info-soft {
    color: rgb(155, 89, 182) !important;
    background-color: rgba(155, 89, 182, 0.1) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .info-soft .fc-event-title, .info-soft .fc-event-time {
        color: rgb(155, 89, 182) !important;
    }

.info2-soft {
    color: rgb(19, 222, 185) !important;
    background-color: rgba(19, 222, 185, 0.1) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .info2-soft .fc-event-title, .info2-soft .fc-event-time {
        color: rgb(19, 222, 185) !important;
    }

.success-soft {
    color: rgb(46, 204, 113) !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .success-soft .fc-event-title, .success-soft .fc-event-time {
        color: rgb(46, 204, 113) !important;
    }

.warning-soft {
    color: rgb(255, 174, 31) !important;
    background-color: rgba(255, 174, 31, 0.1) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .warning-soft .fc-event-title, .warning-soft .fc-event-time {
        color: rgb(255, 174, 31) !important;
    }

.danger-soft {
    color: rgb(233, 79, 134) !important;
    background-color: rgba(233, 79, 134, 0.1) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .danger-soft .fc-event-title, .danger-soft .fc-event-time {
        color: rgb(233, 79, 134) !important;
    }

.dark-soft {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(190, 190, 190) !important;
    border: none !important;
    padding: 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
}
    .dark-soft .fc-event-title, .dark-soft .fc-event-time {
        color: rgb(255, 255, 255) !important;
    }

/*.fc-event-title,
.fc-event-main,
.fc-event-main-frame,
.fc-event-title-container {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0 28px 0 0;
}*/

/* Only affect mobile */
@media (max-width: 768px) {
    .fc-event-title {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Limit visible characters (approximate width of 10 chars) */
    .fc-event-title {
        width: 7ch; /* 1ch ≈ width of one character */
    }
}

/* ===== Modal stays big (you already set xl), keep comfy desktop ===== */
.role-modal .modal-dialog { max-width: 1280px; }
.role-modal .modal-body   { padding: 1.25rem 1.5rem; }

/* ===== Desktop table (comfortable) ===== */
:root {
  --perm-res-w: 260px;        /* resource col width (desktop) */
  --perm-col-w: 72px;         /* action col width (desktop) — a bit wider for text */
  --perm-col-w-sm: 48px;      /* mobile card grid uses this internally */
  --perm-checkbox-size: 20px; /* desktop checkbox size */
}

.permissions-table {
  --bs-table-border-color: rgba(0,0,0,.14);
  border-collapse: separate;
  border-spacing: 0;
}

/* Header bottom border */
.permissions-table.table thead > tr > th {
  border-bottom: 1px solid var(--bs-table-border-color) !important;
}

/* Default cell borders in BS5 are set here; override with dashed bottom */
.permissions-table.table > :not(caption) > * > * {
  border-bottom: 1px dashed var(--bs-table-border-color) !important;
  /* keep other sides default (none) so we can add our own verticals */
}

/* Vertical separators between action columns */
.permissions-table.table th + th,
.permissions-table.table td + td {
  border-left: 1px solid var(--bs-table-border-color) !important;
}

/* Sticky first column needs a clear divider to its right */
.permissions-table .sticky-left {
  background: var(--bs-body-bg);
  position: sticky;
  left: 0;
  z-index: 4;
  border-right: 1px solid var(--bs-table-border-color) !important;
  background-clip: padding-box;
}

/* Make the faint dashes in "empty" cells a bit lighter */
.permissions-table td.text-muted {
  border-bottom-color: rgba(0,0,0,.08) !important;
}
/* column widths */
.permissions-table .perm-th.sticky-left,
.permissions-table .perm-resource { width: var(--perm-res-w); max-width: var(--perm-res-w); }
.permissions-table .perm-action,
.permissions-table .perm-cell { width: var(--perm-col-w); max-width: var(--perm-col-w); }

/* horizontal action labels */
.action-label {
  display: inline-block;
  writing-mode: initial;
  transform: none;
  white-space: nowrap;
  font-size: .95rem;
}

/* comfy rows */
.permissions-table td { padding: .6rem .7rem; white-space: nowrap; }
.permissions-table .form-check-input,
.permissions-table .perm-checkbox { width: var(--perm-checkbox-size); height: var(--perm-checkbox-size); margin: 0 auto; display: block; }

/* ===== Responsive switch: desktop table vs mobile cards ===== */
.desktop-perms { display: none; }
.mobile-perms  { display: block; }
@media (min-width: 992px) { .desktop-perms{display:block;} .mobile-perms{display:none;} }

/* ===== Mobile cards (neutral, normal checkboxes) ===== */
.perm-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: .9rem .95rem;
  margin-bottom: .9rem;
}

.perm-card-header {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.65rem;
}

/* grid of action items; no shaded “chips” */
.perm-chip-grid {
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem;
}
@media (min-width: 420px) { .perm-chip-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* neutral label: no background, no borders; keep tap target roomy */
.perm-chip {
  background: transparent;
  border: none;
  padding: .35rem .25rem;
}

/* Optional: subtle hover to indicate tap target without adding a box */
.mobile-perms .perm-chip:hover { background: rgba(0,0,0,0.03); }
.form-select-sm.w-auto { min-width: 160px; }

.mobile-perms .form-check-input {
  width: var(--perm-checkbox-size);
  height: var(--perm-checkbox-size);
  margin: 0;
}

/* Aligns filter nicely with table title area */
.permissions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Keep small controls readable and properly spaced */
.permissions-header select.form-select-sm {
  min-width: 160px;
}
.permissions-header .btn-light {
  padding: .25rem .6rem;
  font-size: .85rem;
}

/* Adjust spacing when stacked on smaller screens */
@media (max-width: 576px) {
  .permissions-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
}
@media (max-width: 576px) {
    .mobile-perms .form-check-input {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 576px) {
    #modal_edit_equipment_header, #modal_edit_material_header {
        flex-wrap: wrap;
    }

        #modal_edit_equipment_header .badge, #modal_edit_material_header .badge {
            margin-bottom: 0.5rem;
        }
}

.m-5-except-bottom {
    margin-top: 1.5rem !important;
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .m-5-except-bottom {
        margin-top: 1.2rem !important;
        margin-right: 1.2rem !important;
        margin-left: 1.2rem !important;
        margin-bottom: 0 !important;
    }
}
.cb .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
/*    width: 18px;
    height: 18px;*/
    border: 1px solid #666;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    background-color: #fff;
    background-image: none!important;
    transition: all 0.2s ease;
}

.cb .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.cb .form-check-input:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 12px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -60%) rotate(45deg);
}

.tab-content > .tab-pane:not(.active) {
    display: none !important;
}

.tab-content > .tab-pane.active.show {
    display: block !important;
}

.tab-content > .tab-pane {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.tab-content > .tab-pane.active.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}