body{
 margin:0;
 font-family:Arial;
 display:flex;
 height:100vh;
 overflow:hidden;
}
#dataDiv {
    display:flex;
}
/* LEFT PANEL */
#left{
 width:270px;
 min-width:270px;
 border-right:1px solid #ddd;
 padding:15px;
 background:#fafafa;
 overflow:auto;
 z-index:2;
}

/* TOP TOGGLE BUTTONS */
.sourceSwitch{
 display:flex;
 gap:6px;
 margin-bottom:10px;
}

.sourceSwitch button{
 flex:1;
 padding:7px;
 border:none;
 cursor:pointer;
 background:#e9eefc;
}

.sourceSwitch button.active{
 background:#2d7ff9;
 color:white;
}

.panel{ display:none; }

.row{
 border:1px solid #ddd;
 padding:10px;
 margin-bottom:0px;
 background:white;
 cursor:pointer;
 position:relative;
}
.row:hover{background:#f3f7ff}
.row.active{ background:#e8f2ff; }

.filetype{
 font-size:11px;
 color:#888;
 margin-top:3px;
}

.menu{
 position:absolute;
 right:8px;
 top:6px;
 font-weight:bold;
 cursor:pointer;
}

.dropdown{
 display:none;
 position:absolute;
 right:0;
 top:18px;
 background:white;
 border:1px solid #ccc;
 z-index:5;
 min-width:140px;
}
.dropdown div{
 padding:0px 0px;
 cursor:pointer;
}
.dropdown div:hover{ background:#eee }

#right{
 flex:1;
 display:flex;
 flex-direction:column;
 height:100vh;
 overflow:hidden;
}

#title{
 margin:0;
 padding:12px;
 border-bottom:1px solid #ddd;
 background:#fff;
}

#editor{
 display:none;
 flex-direction:column;
 height:40%;
 border-bottom:1px solid #ccc;
 background:white;
}

#editorHeader{
 font-weight:bold;
 padding:8px;
 background:#f5f5f5;
 border-bottom:1px solid #ddd;
}

#editorBody{ flex:1; }

#editor textarea{
 width:100%;
 height:100%;
 border:none;
 outline:none;
 resize:none;
 padding:10px;
 font-family:monospace;
 box-sizing:border-box;
}

#editorBtns{
 padding:8px;
 border-top:1px solid #ddd;
 background:#fafafa;
}

#previewBox{
 max-height:120px;
 overflow:auto;
 border-top:1px solid #ddd;
}

#data{
 flex:1;
 display:flex;
 flex-direction:column;
 overflow:hidden;
}

#controls{
 padding:8px 12px;
 border-bottom:1px solid #ddd;
 background:#fafafa;
 font-size:13px;
}

#tableArea{
 flex:1;
 overflow:auto;
 padding:0;
}

.tableWrap{
 overflow:auto;
 height:100%;
}

table{
 border-collapse:collapse;
 width:max-content;
 min-width:100%;
}

th,td{
 border:1px solid #ccc;
 padding:6px 10px;
 white-space:nowrap;
}

th{
 background:#f7f7f7;
 position:sticky;
 top:0;
 z-index:1;
}

.filter{
 width:95%;
 font-size:11px;
 margin-top:3px;
}

#dbPanel input, #dbPanel select{
 width:100%;
 margin:4px 0 10px;
 padding:6px;
 box-sizing:border-box;
}

/* =========================
   MANUAL DATA EDITOR
========================= */

#manualDataEditor{
  display:none;
  padding:15px;
  overflow:auto;
  background:#fff;
  height:100%;
  box-sizing:border-box;
}

#manualDataEditor input{
  font-size:13px;
}

/* TABLE */
#manualGridTable{
  border-collapse:collapse;
  border-spacing:0;
  margin-top:10px;
  width:max-content;
  min-width:100%;
}

#manualGridTable th,
#manualGridTable td{
  border:1px solid #cfcfcf;
  padding:0;
  margin:0;
  min-width:120px;
  height:32px;
  box-sizing:border-box;
}

#manualGridTable th{
  background:#f7f7f7;
  font-weight:normal;
}

/* HEADER INPUTS */
.manual-col-input{
  width:100%;
  height:100%;
  border:none;
  outline:none;
  padding:6px 8px;
  margin:0;
  box-sizing:border-box;
  background:transparent;
  font-weight:bold;
}

/* CELL INPUTS */
.manual-cell-input{
  width:100%;
  height:100%;
  border:none;
  outline:none;
  padding:6px 8px;
  margin:0;
  box-sizing:border-box;
  background:white;
}

/* CORNER */
.cornerCell{
  width:54px;
  min-width:54px !important;
  background:#f1f1f1;
}

/* COLUMN SELECTOR ROW */
.manual-col-select{
  text-align:center;
  cursor:pointer;
  user-select:none;
  height:24px !important;
  background:#f3f3f3;
  font-size:12px;
}

.manual-col-select:hover{
  background:#e5efff;
}

/* ROW ACTIONS */
.manual-row-actions{
  width:54px;
  min-width:54px !important;
  text-align:center;
  background:#f7f7f7;
  white-space:nowrap;
}

.rowAddBtn,
.rowDeleteBtn{
  width:22px;
  height:22px;
  padding:0;
  margin:2px;
  border:1px solid #ccc;
  background:white;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}

.rowAddBtn:hover,
.rowDeleteBtn:hover{
  background:#eef4ff;
}

/* SELECTION */
.selected-col{
  background:#e8f2ff !important;
}

/* ---------- popup -------------- */
.action-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.action-modal-box {
    width: 320px;
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

.action-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 8px;
    color: #111827;
}

.action-modal-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =========================
   PAGE WRAPPER FIX
========================= */

#appContainer {
    height: calc(100vh - 32px); /* bottom nav height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.page.active {
    display: block;
}

/* ======= db selected is python code ===== */
#pythonCode {
    width: 100%;
    min-height: 300px;
    font-family: Consolas, monospace;
    resize: vertical;
}

/* =========================
   BOTTOM NAV
========================= */

.bottomNav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: #1e293b;
    display: flex;
    z-index: 999;
}

.bottomNav button {
    flex: 1;
    border: none;
    background: transparent;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.bottomNav button.active {
    background: #3b82f6;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}