/* Table Section Container */
.my-table-section {
    padding: 10px 20px 30px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-container {
    width: 100%;
    /* max-width: 1400px; Remove max-width to allow full usage */
    /* overflow-x: auto; Try to avoid scroll, but keep as fallback */
    overflow-x: auto; 
    /* Increased shadow for floating effect */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0,0,0,0.1); 
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: #fff; /* Ensure white background for shadow to work well */
}

/* Table Styles */
.my-custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    /* min-width: 900px; Remove min-width to prevent scroll */
    table-layout: auto; /* Allow auto resizing */
}

/* Header Styles */
.my-custom-table thead th {
    background: linear-gradient(45deg, #17a2b8, #9b42f5);
    color: #ffffff;
    padding: 12px 6px; /* Reduce padding */
    font-weight: 600;
    text-align: center;
    /* font-size: 0.9rem; */
    font-size: clamp(12px, 0.8vw, 14px); /* Adaptive font size */
    white-space: nowrap; /* Keep headers on one line */
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.3); /* Light vertical line for headers */
}

.my-custom-table thead th:last-child {
    border-top-right-radius: 10px;
    border-right: none;
}

/* Body Styles */
.my-custom-table tbody td {
    padding: 8px 4px; /* Reduce padding */
    /* border-bottom: 1px solid #eee; */
    border-bottom: 1px solid #e0e0e0; /* Lighter grey for horizontal line */
    border-right: 1px solid #e0e0e0; /* Lighter grey for vertical line */
    text-align: center;
    vertical-align: middle;
    /* font-size: 0.85rem; */
    font-size: clamp(11px, 0.75vw, 13px); /* Adaptive font size */
    color: #333;
    
    /* Default: single line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Safety limit for non-wrapping columns */
}

.my-custom-table tbody td:last-child {
    border-right: none; /* No vertical line for last column */
}

/* Specific Column Styles */

/* Reduce padding for text columns to save space */
.my-custom-table tbody td.col-domain,
.my-custom-table tbody td.col-name {
    padding: 8px 2px;
    min-width: 120px; /* Enlarge domain and name columns */
    max-width: 250px;
}

.my-custom-table tbody td.col-language {
    padding: 8px 2px; /* Minimal padding */
}

/* Allow wrapping for Description and URL */
.my-custom-table tbody td.col-description,
.my-custom-table tbody td.col-url {
    white-space: normal;
    word-break: break-all; /* Ensure long urls break */
    min-width: 100px; /* Reduced from 120px */
    max-width: 200px; /* Reduced from 300px */
    text-align: left; /* Better for reading text */
}

/* Date Columns */
.my-custom-table tbody td.col-create,
.my-custom-table tbody td.col-update {
    white-space: normal; /* Allow <br> to work */
    line-height: 1.3;
    font-size: clamp(10px, 0.7vw, 12px); /* Slightly smaller for dates */
    min-width: 80px;
}

/* Button Columns */
.my-custom-table tbody td.col-btn {
    white-space: nowrap;
    width: 1%; /* Shrink to fit content */
    padding: 8px 12px; /* Increased padding to match "Download" visual weight */
    min-width: 60px; /* Ensure a minimum width so they don't look squeezed */
}

.my-custom-table tbody tr:last-child td {
    /* border-bottom: none; Keep bottom border for grid look or remove if outer container has it. 
       Usually grid tables keep bottom border for consistency. */
    border-bottom: 2px solid #d0d0d0;
}

/* Remove hover effect */
/* .my-custom-table tbody tr:hover {
    background-color: #f9f9f9;
} */

/* Button Base Styles */
.btn-my {
    padding: 4px 8px; /* Reduce padding */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: clamp(10px, 0.7vw, 12px); /* Adaptive font size */
    transition: all 0.3s;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    white-space: nowrap;
}

.btn-my:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Specific Button Colors */
.btn-preview {
    background-color: #007BFF;
}
.btn-preview:not(:disabled):hover {
    background-color: #007BFF;
    opacity: 0.9;
}

.btn-download {
    background-color: #28A745;
}
.btn-download:not(:disabled):hover {
    background-color: #28A745;
    opacity: 0.9;
}

.btn-edit {
    background-color: #ff6b9d; /* More vibrant pink */
    box-shadow: 0 2px 4px rgba(255, 107, 157, 0.3);
    font-weight: 500;
}
.btn-edit:not(:disabled):hover {
    background-color: #ff4785; /* Darker vibrant pink on hover */
    box-shadow: 0 4px 8px rgba(255, 71, 133, 0.4);
    transform: translateY(-1px);
}

.btn-delete {
    background-color: #DC3545;
}
.btn-delete:not(:disabled):hover {
    background-color: #bd2130;
}