/* =========================================
   DATA TABLES STYLE
========================================= */
.ks-data-module {
    width: 100%;
    background: var(--ks-bg);
    border: 1px solid var(--ks-border);
    border-radius: 6px;
    box-shadow: var(--ks-shadow);
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.ks-data-header {
    background: var(--ks-panel-bg);
    border-bottom: 1px solid var(--ks-border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 10px;
}

/* FIXED HEIGHT FOR BOTH TABLES FOR PERFECT SYMMETRY */
.ks-data-table-wrapper {
    width: 100%;
    height: 450px; /* STRICTLY SAME HEIGHT FOR BOTH */
    overflow-y: auto; 
    overflow-x: auto; /* Will only trigger on extremely tiny mobile screens now */
    position: relative;
    -webkit-overflow-scrolling: touch; 
}

.ks-data-table-wrapper::-webkit-scrollbar { width: 6px; height: 6px; }
.ks-data-table-wrapper::-webkit-scrollbar-track { background: var(--ks-bg); }
.ks-data-table-wrapper::-webkit-scrollbar-thumb { background: var(--ks-border); border-radius: 4px; }

.ks-data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--ks-text);
    table-layout: auto;
}

/* THE FIX: Allow headers to wrap to prevent horizontal stretching */
.ks-data-table th {
    background-color: var(--ks-bg) !important; 
    color: var(--ks-border);
    font-weight: 600;
    text-align: left;
    padding: 10px 10px; /* Reduced padding to fit width perfectly */
    border-bottom: 1px solid var(--ks-border);
    white-space: normal; /* THE FIX: Allows text to wrap, destroying the horizontal scrollbar */
    line-height: 1.3;
    position: sticky;
    top: -1px; 
    z-index: 20; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

html[data-ks-theme="dark"] .ks-data-table th,
html[data-ks-theme="combo"] .ks-data-table th,
html[data-ks-theme="galaxy"] .ks-data-table th { background-color: #1a1c20 !important; }
html[data-ks-theme="light"] .ks-data-table th { background-color: #ffffff !important; }

/* Reduced padding for cells to maximize horizontal space */
.ks-data-table td { padding: 8px 10px; border-bottom: 1px solid rgba(128, 128, 128, 0.2); vertical-align: middle; line-height: 1.4; }
.ks-data-table tr:last-child td { border-bottom: none; }
.ks-data-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
html[data-ks-theme="light"] .ks-data-table tbody tr:hover { background: rgba(0, 0, 0, 0.03); }

/* Typography & Colors */
.ks-text-gold { color: var(--ks-border); font-weight: bold; }
.ks-text-green { color: #10b981; font-weight: bold; }
.ks-text-orange { color: #ea580c; }
.ks-text-red { color: #ef4444; }

/* STRICT LIGHT/NORMAL FONT FOR TELUGU */
.kalasutra-module[data-ks-lang="te"] .ks-data-table { font-family: 'Mallanna', sans-serif !important; font-weight: 400 !important; font-size: 16px; }
.kalasutra-module[data-ks-lang="te"] .ks-data-table th, .kalasutra-module[data-ks-lang="te"] .ks-text-gold, .kalasutra-module[data-ks-lang="te"] .ks-text-green { font-weight: bold !important; }

/* INTERACTIVE DATA TOOLTIPS */
.ks-has-tooltip { cursor: help; border-bottom: 1px dotted var(--ks-border); transition: all 0.2s ease; }
.ks-has-tooltip:hover { color: var(--ks-border); }

.ks-data-popup {
    position: fixed; background: var(--ks-panel-bg); border: 1px solid var(--ks-border); 
    color: var(--ks-text); padding: 12px 16px; border-radius: 8px; font-size: 12px; 
    z-index: 99999; box-shadow: 0 10px 30px rgba(0,0,0,0.6); pointer-events: none; 
    line-height: 1.5; max-width: 280px; font-family: 'Poppins', sans-serif;
}
.ks-data-popup-title { font-weight: bold; color: var(--ks-border); margin-bottom: 6px; border-bottom: 1px solid rgba(212, 175, 55, 0.3); padding-bottom: 4px; font-size: 14px; }
.ks-data-popup-desc { opacity: 0.9; }
.ks-data-popup-planet { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(128, 128, 128, 0.3); color: #10b981; font-size: 11px; }