html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.uppercase-input {
  text-transform: uppercase;
}

/* Uppercase compact status cards without changing their underlying values. */
.badge {
  text-transform: uppercase;
}

.customer-list-table .badge-fixed {
  font-size: clamp(0.58rem, 0.5rem + 0.15vw, 0.68rem);
  letter-spacing: -0.01em;
}

/* Match Customer Enrichment table headings without changing table colors or sizing. */
thead th {
  text-transform: uppercase;
}

/* Tom Select Dark Theme Overrides */
.ts-control {
    background-color: transparent !important;
    border: 1px solid rgba(13, 202, 240, 0.5) !important;
    color: #fff !important;
}
.ts-control input {
    color: #fff !important;
}
.ts-control input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
.ts-dropdown {
    background-color: #164e58 !important;
    color: #fff !important;
    border: 1px solid rgba(13, 202, 240, 0.4) !important;
}
.ts-dropdown .option {
    color: #fff !important;
}
.ts-dropdown .option.active, .ts-dropdown .option:hover {
    background-color: rgba(13, 202, 240, 0.2) !important;
    color: #22d3ee !important;
}
.ts-wrapper.single .ts-control:after {
    border-color: #0dcaf0 transparent transparent transparent !important;
}

/* Premium Dropdown Item Hover */
.dropdown-premium {
    color: #cbd5e1 !important;
    transition: all 0.3s ease;
}
.dropdown-premium:hover {
    background-color: rgba(13, 202, 240, 0.15) !important;
    padding-left: 1.5rem !important;
    color: #22d3ee !important;
}

/* Passed By Pill Badge Style */
.ts-control .item {
    background-color: #00b4d8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 1px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center;
}
.ts-control .item .remove {
    color: #ffffff !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    margin-left: 8px !important;
    padding-left: 8px !important;
    font-size: 1.1em !important;
}
.ts-control .item .remove:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 20px 20px 0 !important;
}

/* Premium Add/Cancel Toggle Buttons */
.btn-premium-add {
    background: linear-gradient(135deg, #22d3ee, #0891b2) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3) !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
}
.btn-premium-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(8, 145, 178, 0.5) !important;
    color: #fff !important;
}
.btn-premium-add:active {
    transform: translateY(0);
}

.btn-premium-cancel {
    background: linear-gradient(135deg, #f43f5e, #be123c) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(190, 18, 60, 0.3) !important;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
}
.btn-premium-cancel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(190, 18, 60, 0.5) !important;
    color: #fff !important;
}
.btn-premium-cancel:active {
    transform: translateY(0);
}

/* Premium Text Input to match TomSelect dark theme */
.premium-input {
    background-color: transparent !important;
    border: 1px solid rgba(13, 202, 240, 0.5) !important;
    color: #fff !important;
}
.premium-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
.premium-input:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.25) !important;
}

/* Note and termin image attachments */
.image-drop-surface {
    position: relative;
}

.image-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 2px dashed #22d3ee;
    border-radius: 0.35rem;
    color: #e6fbff;
    background: rgba(8, 47, 55, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.image-drop-overlay i {
    font-size: 1.65rem;
}

.note-image-composer.is-dragging .image-drop-overlay {
    opacity: 1;
    visibility: visible;
}

.note-attachment-toolbar {
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    gap: 0.55rem;
    padding-top: 0.35rem;
}

.image-attachment-trigger {
    display: inline-grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    color: #9be8f5;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.image-attachment-trigger i {
    display: inline-block;
    transform: rotate(45deg);
}

.image-attachment-trigger:hover,
.image-attachment-trigger:focus-visible {
    color: #fff;
    background: rgba(34, 211, 238, 0.16);
    outline: none;
}

.image-attachment-trigger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.image-attachment-hint,
.image-attachment-count {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.75rem;
}

.image-attachment-count {
    margin-left: auto;
}

.image-upload-preview,
.image-attachment-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.image-upload-preview:empty {
    display: none;
}

.image-preview-card,
.image-attachment-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, 0.35);
    border-radius: 0.65rem;
    background: rgba(2, 20, 24, 0.8);
}

.image-preview-card img,
.image-attachment-card img {
    width: 100%;
    height: 110px;
    display: block;
    object-fit: cover;
}

.image-preview-name,
.image-attachment-caption {
    padding: 0.35rem 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-preview-remove,
.image-attachment-delete-form {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
}

.image-preview-remove {
    width: 1.45rem;
    height: 1.45rem;
    padding: 0 0 0.1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: #fff;
    background: rgba(5, 20, 25, 0.48);
    font-size: 1rem;
    line-height: 1;
    backdrop-filter: blur(4px);
}

.image-preview-remove:hover,
.image-preview-remove:focus-visible {
    background: rgba(5, 20, 25, 0.78);
    outline: none;
}

.image-attachment-link {
    display: block;
    cursor: zoom-in;
}

.image-attachment-delete-form {
    z-index: 2;
    margin: 0;
}

.image-attachment-delete {
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    padding: 0 0 0.1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: #fff;
    background: rgba(5, 20, 25, 0.48);
    font-size: 1rem;
    line-height: 1;
    backdrop-filter: blur(4px);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.image-attachment-delete:hover,
.image-attachment-delete:focus-visible {
    background: rgba(5, 20, 25, 0.78);
    transform: scale(1.08);
    outline: none;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 2.5rem 1rem 1rem;
    background: rgba(0, 10, 14, 0.88);
    backdrop-filter: blur(5px);
}

.image-lightbox[hidden] {
    display: none;
}

.image-lightbox-figure {
    display: flex;
    max-width: min(94vw, 1400px);
    max-height: 90vh;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

.image-lightbox-image {
    max-width: 100%;
    max-height: calc(90vh - 3rem);
    border-radius: 0.45rem;
    object-fit: contain;
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.5);
}

.image-lightbox-caption {
    max-width: 90vw;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 0 0.15rem;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
}

body.image-lightbox-open {
    overflow: hidden;
}

/* Keep every customer-list action visible at normal laptop zoom. */
@media (min-width: 992px) and (max-width: 1799.98px) {
    .customer-list-table {
        width: 100%;
        table-layout: fixed;
        font-size: 0.8rem;
    }

    .customer-list-table > :not(caption) > * > * {
        padding: 0.5rem 0.3rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .customer-list-table th:nth-child(1) { width: 5%; }
    .customer-list-table th:nth-child(2) { width: 12%; }
    .customer-list-table th:nth-child(3),
    .customer-list-table th:nth-child(4),
    .customer-list-table th:nth-child(5) { width: 7%; }
    .customer-list-table th:nth-child(6) { width: 9%; }
    .customer-list-table th:nth-child(7) { width: 4%; }
    .customer-list-table th:nth-child(8) { width: 6%; }
    .customer-list-table th:nth-child(9) { width: 8%; }
    .customer-list-table th:nth-child(10) { width: 11%; }
    .customer-list-table th:nth-child(11),
    .customer-list-table th:nth-child(12),
    .customer-list-table th:nth-child(13) { width: 8%; }

    .customer-list-table .badge-fixed {
        width: min(72px, 100%);
    }

    .customer-list-table td:nth-child(1),
    .customer-list-table td:nth-child(3),
    .customer-list-table td:nth-child(4),
    .customer-list-table td:nth-child(5),
    .customer-list-table td:nth-child(7),
    .customer-list-table td:nth-child(8),
    .customer-list-table td:nth-child(11),
    .customer-list-table td:nth-child(12),
    .customer-list-table td:nth-child(13) {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .customer-list-table .btn-sm {
        --bs-btn-padding-x: 0.45rem;
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-font-size: 0.78rem;
        padding-right: 0.4rem !important;
        padding-left: 0.4rem !important;
    }

    .activity-log-scroll {
        overflow-x: hidden;
    }

    .activity-log-table {
        width: 100%;
        table-layout: fixed;
        font-size: 0.8rem;
    }

    .activity-log-table > :not(caption) > * > * {
        padding-right: 0.55rem !important;
        padding-left: 0.55rem !important;
    }

    .activity-log-table th:nth-child(1) { width: 17%; }
    .activity-log-table th:nth-child(2) { width: 14%; }
    .activity-log-table th:nth-child(3) { width: 9%; }
    .activity-log-table th:nth-child(4) { width: 17%; }
    .activity-log-table th:nth-child(5) { width: 22%; }
    .activity-log-table th:nth-child(6) { width: 21%; }

    .activity-log-table .activity-log-record-id,
    .activity-log-table .activity-log-record-id a,
    .activity-log-table .activity-log-record-id span,
    .activity-log-table .activity-log-description {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .activity-log-table .badge {
        max-width: 100%;
        padding-right: 0.65rem !important;
        padding-left: 0.65rem !important;
        white-space: normal;
    }
}