/* Remove DataTables default borders */
table.dataTable {
    border: 0 !important;
}

/* Header divider like Filament */
table.dataTable thead th {
    border-bottom: 1px solid #e5e7eb !important;
    background-color: #f9fafb;
}

/* Row separators */
table.dataTable tbody td {
    border-bottom: 1px solid #f1f5f9;
}

/* Remove DataTables stripe effect */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: transparent;
}
.datatable-actions button,
.datatable-actions a {
    opacity: 0.9;
}

.datatable-actions button:hover,
.datatable-actions a:hover {
    opacity: 1;
}

/* Performance Tier Badges */
.performance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.performance-high {
    background-color: #dcfce7; /* green-100 */
    color: #166534;           /* green-700 */
}

.performance-active {
    background-color: #fef9c3; /* yellow-100 */
    color: #854d0e;            /* yellow-700 */
}

.performance-low {
    background-color: #fee2e2; /* red-100 */
    color: #991b1b;            /* red-700 */
}

.performance-default {
    background-color: #f3f4f6;
    color: #374151;
}
#subscriptionBtn {
    transition: opacity 0.2s ease;
}


.all-db-tbl{ font-size: 14px; background: #fff; border: 1px solid rgb(228, 228, 231); border-radius: 15px;}
.all-db-tbl table.dataTable thead th { border-bottom:0; white-space: nowrap;  padding: 18px 15px; background-color: #fff;}
/* .all-db-tbl table.dataTable tr:nth-of-type(even)>* { background-color: #f4f4f5; } */
/* .all-db-tbl #usersTable thead { display: none;} */
table.dataTable thead th, table.dataTable tfoot th{ vertical-align: middle;}
.all-db-tbl table.dataTable tr:hover { background-color: #fff7f2 !important;}
.all-db-tbl tbody tr td{ border-color: rgb(228, 228, 231); white-space: nowrap; }

div.dt-container.dt-empty-footer tbody>tr:last-child>*{border-bottom:0 !important;}

.all-db-tbl .table > :not(caption) > * > *{ padding-top: 1rem; padding-bottom: 1rem;}

/* .all-db-tbl tbody tr td{border-color:transparent;}  */

.all-db-tbl .paginate_button:hover{background: #222 !important; border-color: #222 !important; }

.all-db-tbl .paginate_button.current, .all-db-tbl .paginate_button.current:hover{background: #F1F1F1 !important; border-color: #F1F1F1 !important; color: #222 !important}

.all-db-tbl .paginate_button{border-radius: 5px !important; color: var(--mid-grey) !important; font-size: 15px; font-weight: 400; padding: .4em !important; min-width: 40px !important;}

.all-db-tbl div.dt-layout-cell{padding: 10px 0 !important;}

.all-db-tbl select.dt-input{border-radius: 3px; border: 1px solid rgba(154, 162, 172, 0.80); background: #FFF; color: var(--light-grey); font-size: 14px;  padding: 12px 10px;  margin-right: 15px; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); width: 80px; background-repeat: no-repeat; background-position: 82% 15px; background-size: 14px;}

.all-db-tbl .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.paginate_button.disabled,
.paginate_button.disabled:hover,
.paginate_button.disabled:active{ font-weight: 600 !important; background: transparent !important; border-color: transparent !important; color: rgba(0, 0, 0, 0.5) !important;}

.all-db-tbl .paginate_button.previous{ margin-left: 0; margin-right: 10px; font-weight: 600 !important;}
.all-db-tbl .paginate_button.next{ margin-left: 10px; margin-right: 0px; font-weight: 600 !important;}

.all-db-tbl .dt-search input{padding: 8px !important; border: 1px solid rgba(154, 162, 172, 0.80) !important; padding: 12px 15px !important; margin: 0;}
.all-db-tbl .dt-search input:focus-visible{ outline: none;}

div.dt-processing>div:last-child>div{background: #ff740d !important; }

.dt-button-collection { position: absolute; left: 0; top: 100% !important; margin: 0; margin-top: 5px; padding: 0; border-radius: 3px; z-index: 9000; min-width: 180px;  text-align: left; list-style: none; border: 1px solid rgba(154, 162, 172, 0.80); background: #FFF; box-shadow: 0px 4px 10px 0px rgba(138, 142, 148, 0.15);}
.dt-button-collection button { border: none; color: #4A4A4A; padding: 8px 16px; word-wrap: break-word; white-space: normal; font-weight: 400; line-height: 1.42857143; background: transparent; display: block; width: 100%;text-align: left; font-size: 14px;}

.all-db-tbl .dataTables_paginate,
.all-db-tbl .dataTables_length { padding: 15px;}
.all-db-tbl .dataTables_length {position: sticky; left: 0; }
.all-db-tbl table{border-top: 1px solid rgb(229, 231, 235) !important;}

.all-db-tbl select{border-radius: 5px; border: 0; background: #FFF; color: var(--light-grey); font-size: 14px;  padding: 5px 12px !important;  margin:0 1px; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); width: 70px; background-repeat: no-repeat; background-position: 82% 10px; background-size: 14px; border-radius: 8px !important;}

.dataTables_wrapper .dataTables_paginate{ float: none; position: sticky; left: 0; width: fit-content;}


/*
.all-db-tbl .table td a{ text-decoration: underline; color: #000; font-weight: 600;}
.all-db-tbl .table td a:hover{text-decoration: none; }
.all-db-tbl .table td a[type="button"]{text-decoration: none !important;}
.all-db-tbl .table td a[type="button"]:hover{ color:#F1F1F1; text-decoration: none !important;}

*/

.mb-3 {margin-bottom: .75rem;}
.grid-cols-2 {grid-template-columns: repeat(2, 1fr);}
.profile-image img{width: 110px;}
.custom-modal {background: rgba(0, 0, 0, 0.45);}
.custom-modal .bg-white.rounded-xl{ box-shadow: 1px 0 0 0px #fff, 0 0 0 calc(1px + 0px) rgba(9, 9, 11,0.05), 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
 
/* ===============================
   VIEW USER MODAL (FILAMENT STYLE)
================================ */

/* Backdrop */
.view-user-backdrop {background: rgba(0, 0, 0, 0.45);}

/* Modal container */
.view-user-modal {
    width: 100%;
    max-width: 44rem;            /* 1024px */
    max-height: 85vh;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Header */
.view-user-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.view-user-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
}

/* Body */
.view-user-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

/* Footer */
.view-user-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Avatar */
.view-user-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.view-user-avatar img {
    width: 96px;
    height: 96px;
    border-radius: 9999px;
    object-fit: cover;
}

/* Tabs */
.view-user-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.view-user-tab {
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.view-user-tab.active {
    color: #f97316;
    border-color: #f97316;
}

/* Form grid */
.view-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

/* Labels */
.view-user-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

/* Readonly inputs */
.view-user-input,
.view-user-textarea {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    color: #111827;
}

.view-user-textarea {
    resize: none;
}

/* Interests pills */
.view-user-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 0.75rem;
    font-weight: 500;
}