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

.info-icon {
    cursor: pointer;
    color: #0d6efd;
    display: inline-flex;
}

.info-icon:hover {
    color: #084298;
}

.custom-tooltip {
    display: none;
    position: absolute;
    max-width: 340px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.page-container {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* MAIN CENTER WRAPPER */
.letter-builder-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* POSTALYTICS STYLE FRAME */
.letter-builder-frame {
    width: 950px;
    height: 1050px;
    background: #fff;
    border: 2px solid #cfcfcf;
    border-radius: 16px;
    padding: 50px 60px;
    position: relative;
    box-sizing: border-box;
}

/* COMMON BLOCK STYLE */
.lb-block {
    position: absolute;
    border: 1.5px solid #999;
    background: #fff;
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* ADDRESS BLOCK */
.lb-address {
    width: 520px;
    height: 250px;
    top: 60px;
    left: 50px;
}

/* LOGO BLOCK */
.lb-logo {
    width: 200px;
    height: 200px;
    top: 60px;
    right: 50px;
    flex-direction: column;
    gap: 8px;
}

/* BODY BLOCK */
.lb-body {
    width: 850px;
    height: 350px;
    top: 330px;
    left: 50px;
}

/* QR BLOCK */
.lb-qr {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 700px;
    flex-direction: column;
}

/* QR CAPTION */
.lb-qr-caption {
    width: 330px;
    height: 70px;
    left: 180px;
    top: 730px;
}

/* FOOTER BLOCK */
.lb-footer {
    width: 850px;
    height: 110px;
    bottom: 60px;
    left: 50px;
}

.lb-block.bg-white {
    background: #fff;
    /* Upload ke baad background white */
}

/* TEXTAREAS INSIDE BLOCKS */
.lb-textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

.img-preview.empty {
    border-style: dashed;
}

.btn-upload {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    background: #0056b3;
    color: #fff;
    text-align: center;
}
/* bottom buttons */
.builder-actions {
    margin: 20px 0;
    text-align: center;
}

.builder-actions button {
    padding: 8px 16px;
    margin: 0 5px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary {
    background: #0056b3;
    color: #fff;
}

.btn-secondary {
    background: #6c757d;
    color: #fff;
}

/* just for showing JSON */
#templateJson {
    width: 100%;
    height: 120px;
    margin-top: 15px;
    font-size: 12px;
}

/* CENTER WRAPPER */
.postcard-builder-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* FIXED 4×6 FRAME (MATCHES YOUR SCREENSHOT) */
.postcard-frame {
    width: 850px;
    height: 550px;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 14px;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

/* COMMON BLOCK STYLE */
.pc-block {
    position: absolute;
    border: 1.5px solid #999;
    background: #fff;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* ------------------------------------------------------ */
/*                    FRONT SIDE (EXACT)                  */
/* ------------------------------------------------------ */

.pc-front-logo {
    width: 150px;
    height: 150px;
    top: 40px;
    left: 35px;
    flex-direction: column;
}

.pc-front-title {
    width: 780px;
    height: 100px;
    top: 200px;
    left: 35px;
}

.pc-front-sub {
    width: 780px;
    height: 100px;
    top: 310px;
    left: 35px;
}

/* ------------------------------------------------------ */
/*                    BACK SIDE (EXACT)                   */
/* ------------------------------------------------------ */

.pc-back-title {
    width: 780px;
    height: 80px;
    top: 40px;
    left: 35px;
}

.pc-back-body {
    width: 480px;
    height: 230px;
    top: 140px;
    left: 35px;
}

.pc-back-qr {
    width: 100px;
    height: 100px;
    top: 130px;
    right: 180px;
    flex-direction: column;
}

.pc-back-qr-caption {
    width: 130px;
    height: 100px;
    top: 130px;
    right: 35px;
}

.pc-back-address {
    width: 260px;
    height: 200px;
    right: 35px;
    top: 240px;
}

.pc-textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    background: #fff;
    outline: none;
    font-size: 14px;
}

.img-preview {
    max-width: 100%;
    max-height: 80%;
    border: 1px dashed #bbb;
    object-fit: contain;
    background: #fff;
}

.btn-upload input {
    display: none;
}

/* TAB BUTTON WRAPPER */
.postcard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    justify-content: center;
}

/* DEFAULT TAB STYLE */
.tab-btn {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #444;
    background: #ffffff;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s ease;
}

/* HOVER EFFECT (AS IN SCREENSHOT) */
.tab-btn:hover {
    background: #eaeaea;
}

.tab-btn.active {
    background-color: #0056b3;
    color: #ffffff;
    border-color: #0056b3;
}

.multi-select-dropdown {
    position: relative;
    width: 300px;
    font-size: 15px;
}

#commDropdown {
    font-size: 15px;
    padding: 10px 12px;
    height: auto;
}

.dropdown-checkbox-list {
    position: absolute;
    background: #fff;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 12px;
    z-index: 999;
    display: none;
    border-radius: 8px;
    font-size: 15px;
    /* CHECKBOX LIST का font बड़ा */
}

.dropdown-checkbox-list label {
    font-size: 15px;
    margin-bottom: 6px;
    cursor: pointer;
}

.dropdown-checkbox-list input[type="checkbox"] {
    transform: scale(1.2);
    /* checkbox size बढ़ाया */
    margin-right: 6px;
}

#selectedCommText {
    font-size: 15px;
    font-weight: 500;
}

/* ── API Status Indicator ── */
.api-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.api-status-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.api-status-healthy {
    background-color: #28a745;
}

.api-status-degraded {
    background-color: #ffc107;
}

.api-status-down {
    background-color: #dc3545;
}

.api-status-not-configured {
    background-color: #6c757d;
}

.api-status-label {
    font-size: 13px;
    color: #495057;
    white-space: nowrap;
}

/* Shared index table + pagination styles (Users/Accounts) */
.table-responsive {
    overflow: visible;
}

.db-main {
    overflow: visible;
}

.btn-users-action.dropdown-toggle::after {
    display: none !important;
}

.btn-users-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 9999px;
    padding: 5px 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #667085;
    cursor: pointer;
    white-space: nowrap;
}

.btn-users-action:hover,
.btn-users-action:focus {
    border-color: #577fb9;
    color: #344054;
    outline: none;
}

.btn-users-action svg {
    flex-shrink: 0;
}

#allUserLists td:last-child,
#allAccountsList td:last-child {
    overflow: visible;
    position: relative;
    text-align: center;
}

#allUserLists th:last-child,
#allAccountsList th:last-child {
    text-align: center;
}

#allUserLists .dropdown,
#allAccountsList .dropdown {
    position: static;
    display: inline-block;
}

#allUserLists .dropdown-menu,
#allAccountsList .dropdown-menu {
    display: none;
    position: absolute;
    right: 8px;
    left: auto;
    top: auto;
    z-index: 1055;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    padding: 6px;
    margin-top: 4px;
    transform: none !important;
    inset: auto !important;
}

#allUserLists .dropdown-menu.show,
#allAccountsList .dropdown-menu.show {
    display: block;
}

#allUserLists .dropdown-menu .dropdown-item,
#allAccountsList .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease;
    white-space: nowrap;
}

#allUserLists .dropdown-menu .dropdown-item:hover,
#allUserLists .dropdown-menu .dropdown-item:focus,
#allAccountsList .dropdown-menu .dropdown-item:hover,
#allAccountsList .dropdown-menu .dropdown-item:focus {
    background: #f2f4f7;
    color: #101828;
}

#allUserLists .dropdown-menu .dropdown-item.text-danger,
#allAccountsList .dropdown-menu .dropdown-item.text-danger {
    color: #d92d20;
}

#allUserLists .dropdown-menu .dropdown-item.text-danger:hover,
#allAccountsList .dropdown-menu .dropdown-item.text-danger:hover {
    background: #fef3f2;
    color: #b42318;
}

#allUserLists .dropdown-menu .dropdown-item i,
#allUserLists .dropdown-menu .dropdown-item svg,
#allAccountsList .dropdown-menu .dropdown-item i,
#allAccountsList .dropdown-menu .dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.75;
}

#allUserLists .dropdown-menu li + li,
#allAccountsList .dropdown-menu li + li {
    border-top: 1px solid #f2f4f7;
    margin-top: 2px;
    padding-top: 2px;
}

.users-page-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: #101828;
}

.btn-users-create {
    background-color: #577fb9;
    border: 1px solid #577fb9;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    padding: 8px 18px;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    text-decoration: none;
    white-space: nowrap;
}

.btn-users-create:hover {
    background-color: #4a6ea8;
    border-color: #4a6ea8;
    color: #ffffff;
}

.users-search-wrapper {
    position: relative;
    width: 230px;
}

.users-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.users-search-input {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 9999px;
    padding: 10px 14px 10px 42px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.users-search-input::placeholder {
    color: #667085;
}

.users-search-input:focus {
    outline: none;
    border-color: #577fb9;
    box-shadow: 0 0 0 3px rgba(87, 127, 185, 0.15);
}

.users-table {
    width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 0;
    border: none !important;
}

.users-table thead.table-secondary tr th {
    background-color: #f9fafb;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eaecf0 !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #475467;
    padding: 12px 24px;
    white-space: nowrap;
}

.users-table tbody tr td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eaecf0 !important;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #475467;
    padding: 16px 24px;
    vertical-align: middle;
    background-color: #ffffff;
}

.users-table tbody tr:hover td {
    background-color: #f9fafb;
}

.users-table.table,
.users-table.table > :not(caption) > * > * {
    border-color: #eaecf0;
    box-shadow: none;
}

.users-table.table-bordered,
.users-table.table-bordered > :not(caption) > * {
    border-width: 0;
}

.users-pagination-info {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: #101828;
}

.users-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}

.users-page-btn:hover {
    background-color: #e4e4e4;
}

.users-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.users-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 250px;
}

.users-filter-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
    margin-bottom: 0;
}

.users-select-wrapper {
    position: relative;
}

.users-filter-select {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 9999px;
    padding: 8px 40px 8px 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.users-filter-select:focus {
    outline: none;
    border-color: #577fb9;
    box-shadow: 0 0 0 3px rgba(87, 127, 185, 0.15);
}

#allUserLists_wrapper .dt-search,
#allUserLists_wrapper .dt-length,
#allUserLists_wrapper .dt-info,
#allUserLists_wrapper .dt-paging,
#allAccountsList_wrapper .dt-search,
#allAccountsList_wrapper .dt-length,
#allAccountsList_wrapper .dt-info,
#allAccountsList_wrapper .dt-paging {
    display: none !important;
}

/* Ensure all DataTables built-in search inputs are wide enough to display text.
   Specificity must beat DT 2.x's default `div.dt-container div.dt-search input { width: auto }` (0,2,3). */
div.dt-container div.dt-search {
    width: 100%;
}
div.dt-container div.dt-search input.dt-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Case Management response modals */
.case-response-modal-content {
    border: 1px solid #eaecf0;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16);
}

#assignResponseProductsModal .modal-title,
#addSpecialTreatmentProductModal .modal-title {
    color: #101828;
}

#assignResponseProductsModal .modal-header small {
    font-size: 12px;
    line-height: 18px;
}

#assignResponseProductsModal .modal-footer .btn-users-create,
#addSpecialTreatmentProductModal .modal-footer .btn-users-create {
    padding: 8px 16px;
    font-size: 14px;
}

.case-response-field .form-label {
    font-size: 14px;
    color: #344054;
}