/* ── RESET ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f0f4f8; color: #333; }

/* ── LOADING BAR ── */
#loadingBar {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: #27ae60; z-index: 200;
  animation: slide 1.5s infinite;
}
@keyframes slide { 0%{left:0;width:0} 50%{left:20%;width:60%} 100%{left:100%;width:0} }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 20px; right: 20px; color: white;
  padding: 10px 18px; border-radius: 6px; display: none;
  font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 999;
}

/* ── HEADER ── */
header {
  background: linear-gradient(135deg, #1a3c6e, #2d6db5);
  color: white; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  height: 64px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  position: sticky; top: 0; z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-logo { font-size: 28px; }
.header-title { font-size: 17px; font-weight: bold; }
.header-subtitle { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.user-badge {
  background: rgba(255,255,255,0.15); border-radius: 20px;
  padding: 4px 12px; font-size: 12px;
}
.btn-logout {
  background: #c0392b; color: white; border: none;
  padding: 5px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.btn-logout:hover { background: #a93226; }

/* ── NAV ── */
.nav-bar {
  background: white; border-bottom: 2px solid #1a3c6e;
  display: flex; overflow-x: auto; padding: 0 20px;
}
.nav-tab {
  padding: 12px 18px; cursor: pointer; font-size: 13px;
  border-bottom: 3px solid transparent; white-space: nowrap;
  color: #555; transition: all 0.2s; margin-bottom: -2px;
}
.nav-tab:hover { color: #1a3c6e; background: #f0f4ff; }
.nav-tab.active {
  color: #1a3c6e; font-weight: bold;
  border-bottom: 3px solid #1a3c6e; background: #f0f4ff;
}

/* ── PAGES ── */
.page { display: none; }
.page.active { display: block; }

/* ── LOGIN ── */
.login-screen {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a3c6e, #2d6db5);
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: white; border-radius: 16px; padding: 48px 40px;
  text-align: center; max-width: 440px; width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-logo { font-size: 54px; margin-bottom: 12px; }
.login-card h1 { color: #1a3c6e; font-size: 22px; margin-bottom: 4px; }
.login-card h2 { color: #2d6db5; font-size: 15px; font-weight: normal; margin-bottom: 8px; }
.login-card p { color: #888; font-size: 13px; margin-bottom: 28px; line-height: 1.6; }
.btn-google {
  background: white; color: #333; border: 2px solid #ddd;
  padding: 12px 28px; border-radius: 8px; font-size: 15px;
  cursor: pointer; display: flex; align-items: center;
  gap: 10px; margin: 0 auto; transition: all 0.2s;
}
.btn-google:hover { border-color: #1a3c6e; color: #1a3c6e; }
.login-footer { margin-top: 24px; font-size: 11px; color: #aaa; line-height: 1.6; }

/* ── HOME ── */
.home-banner {
  background: linear-gradient(135deg, #1a3c6e, #2d6db5);
  color: white; padding: 32px 28px;
}
.home-banner h2 { font-size: 22px; margin-bottom: 6px; }
.home-banner p { font-size: 14px; opacity: 0.85; }

.home-stats {
  display: flex; background: white; border-bottom: 1px solid #eee;
  margin-bottom: 0;
}
.home-stat { flex: 1; padding: 16px 20px; text-align: center; border-right: 1px solid #eee; }
.home-stat:last-child { border-right: none; }
.home-stat .sv { font-size: 24px; font-weight: bold; color: #1a3c6e; }
.home-stat .sl { font-size: 11px; color: #888; margin-top: 2px; }

.section-title {
  font-size: 14px; font-weight: bold; color: #1a3c6e;
  padding: 20px 24px 14px; display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: #ddd; margin-left: 8px; }

.cards-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 24px 28px; }
.report-card {
  background: white; border-radius: 10px; padding: 20px 18px;
  width: 200px; cursor: pointer; border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07); transition: all 0.2s; text-align: center;
}
.report-card:hover {
  border-color: #1a3c6e; transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,60,110,0.15);
}
.report-card .card-icon { font-size: 34px; margin-bottom: 10px; }
.report-card .card-title { font-size: 13px; font-weight: bold; color: #1a3c6e; margin-bottom: 4px; }
.report-card .card-dept { font-size: 11px; color: #888; margin-bottom: 8px; }
.card-freq { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
.freq-fortnightly { background: #e8f4fd; color: #1a3c6e; }
.freq-daily       { background: #e8fde8; color: #27ae60; }
.freq-monthly     { background: #fde8e8; color: #c0392b; }
.card-coming { opacity: 0.55; cursor: default; }
.card-coming:hover { transform: none; border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.coming-tag { font-size: 10px; color: #bbb; margin-top: 6px; }

/* ── TOOLBAR ── */
.toolbar {
  background: white; padding: 10px 20px;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; border-bottom: 1px solid #ddd;
}
.toolbar label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
select, input[type="date"], input[type="text"], input[type="number"] {
  padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}

/* ── BUTTONS ── */
.btn { padding: 6px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; color: white; }
.btn-primary { background: #1a3c6e; } .btn-primary:hover { background: #274f8a; }
.btn-success { background: #27ae60; } .btn-success:hover { background: #219a52; }
.btn-danger  { background: #c0392b; } .btn-danger:hover  { background: #a93226; }
.btn-warning { background: #e67e22; } .btn-warning:hover { background: #ca6f1e; }

/* ── KPI ROW ── */
.kpi-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 20px; background: white; border-bottom: 1px solid #ddd;
}
.kpi { border-radius: 8px; padding: 9px 16px; min-width: 130px; text-align: center; }
.kpi.blue   { background: #eef2ff; }
.kpi.green  { background: #e8fde8; }
.kpi.red    { background: #fde8e8; }
.kpi.amber  { background: #fff3cd; }
.kpi.purple { background: #f3e8ff; }
.kpi .val { font-size: 22px; font-weight: bold; color: #1a3c6e; }
.kpi .lbl { font-size: 10px; color: #666; margin-top: 2px; }

/* ── TABLE SHARED ── */
.main { padding: 16px 20px; }
.report-title {
  text-align: center; font-size: 14px; font-weight: bold;
  padding: 10px; background: white; border-bottom: 1px solid #ddd;
}
.table-wrap {
  overflow-x: auto; background: white;
  border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
th, td { border: 1px solid #aaa; text-align: center; vertical-align: middle; }
td { padding: 4px 5px; }
tr:nth-child(even) td { background: #fafafa; }

/* ── PHED TABLE ── */
#phedTable { min-width: 1600px; }
thead tr.row1 th { background: #1a3c6e; color: white; padding: 7px 6px; }
thead tr.row2 th { background: #274f8a; color: white; padding: 5px 6px; }
thead tr.row3 th {
  background: #3a6bbf; color: white; padding: 5px 6px;
  white-space: normal; max-width: 90px; vertical-align: top;
}
thead tr.colnum th {
  background: #dde4f0; color: #333; padding: 3px 4px;
  font-weight: bold; font-size: 11px;
}
tr.high   td { background: #ffdddd !important; }
tr.medium td { background: #fff3cd !important; }
tr.discom-header td {
  background: #1a3c6e !important; color: white;
  font-weight: bold; text-align: left; padding: 5px 10px; font-size: 13px;
}
tr.discom-subtotal td { background: #c8d8f0 !important; font-weight: bold; }
tfoot td { font-weight: bold; background: #dde4f0 !important; }
td input.cell-input {
  width: 68px; border: 1px solid #bbb; border-radius: 3px;
  padding: 2px 3px; font-size: 11px; text-align: center; background: #fffbe6;
}
td input.cell-input[data-field="remarks"]           { width: 130px; }
td input.cell-input[data-field="oldest_pending_date"],
td input.cell-input[data-field="promising_date"]    { width: 100px; }
td input.cell-input.saved  { border-color: #27ae60; background: #f0fff0; }
td input.cell-input.saving { border-color: #f39c12; background: #fffbf0; }

/* ── TOWER TABLE ── */
#towerTable { min-width: 2200px; }
.tower-th-fixed {
  background: #1a3c6e; color: white;
  padding: 7px 5px; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.tower-th-editable {
  background: #1557a0; color: #ffd700;
  padding: 7px 5px; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.tc-indus { background: #f0fff0 !important; }
.tc-jio   { background: #fffaf0 !important; }
td.editable-cell { background: #fffbe6; }
td.editable-cell input,
td.editable-cell select {
  width: 100%; border: 1px solid #bbb; border-radius: 3px;
  padding: 2px 4px; font-size: 11px; background: transparent;
}
td.editable-cell select { min-width: 160px; }
td.saved-cell { background: #f0fff0 !important; }
.status-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: bold; white-space: nowrap;
}
.s-dn-pending      { background: #fde8e8; color: #c0392b; }
.s-dn-deposited    { background: #fff3cd; color: #856404; }
.s-dn-paid-pending { background: #fff3cd; color: #856404; }
.s-sjo             { background: #e8f4fd; color: #1a3c6e; }
.s-sco             { background: #e8f0ff; color: #5b2c8a; }
.s-released        { background: #e8fde8; color: #27ae60; }
.s-held            { background: #f8d7da; color: #721c24; }
.s-not-received    { background: #f0f0f0; color: #666; }

/* ── PAGINATION ── */
.pagination {
  display: flex; gap: 6px; align-items: center;
  padding: 10px 20px; background: white; border-top: 1px solid #ddd; flex-wrap: wrap;
}
.pagination button {
  padding: 4px 10px; border: 1px solid #ccc;
  background: white; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.pagination button.active { background: #1a3c6e; color: white; border-color: #1a3c6e; }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.page-info { font-size: 12px; color: #666; }

/* ── UPLOAD / BATCH ── */
.upload-panel {
  background: white; border-radius: 10px; padding: 24px;
  margin: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); max-width: 600px;
}
.upload-panel h3 { color: #1a3c6e; margin-bottom: 16px; }
.upload-panel label { display: block; font-size: 13px; margin-bottom: 4px; color: #555; }
.upload-panel input,
.upload-panel select { width: 100%; margin-bottom: 12px; }
.upload-progress {
  background: #eee; border-radius: 4px; height: 8px;
  margin-top: 10px; overflow: hidden; display: none;
}
.upload-progress-bar { height: 100%; background: #27ae60; width: 0; transition: width 0.3s; }
.batch-list { margin: 20px; }
.batch-card {
  background: white; border-radius: 8px; padding: 14px 18px;
  margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; border: 2px solid transparent; transition: all 0.2s;
}
.batch-card:hover, .batch-card.active { border-color: #1a3c6e; }
.batch-card .bc-title { font-weight: bold; color: #1a3c6e; font-size: 14px; }
.batch-card .bc-meta  { font-size: 12px; color: #888; margin-top: 2px; }
.batch-card .bc-stats { display: flex; gap: 16px; align-items: center; }
.batch-card .bc-stat  { font-size: 12px; text-align: center; }
.batch-card .bc-stat b { display: block; font-size: 16px; color: #1a3c6e; }

/* ── ADMIN ── */
.admin-wrap { padding: 20px 24px; }
.admin-wrap h3 { color: #1a3c6e; margin-bottom: 14px; }
.admin-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: bold; }
.badge.admin       { background: #fde8e8; color: #c0392b; }
.badge.circle_user { background: #e8f4fd; color: #1a3c6e; }
.badge.viewer      { background: #e8fde8; color: #27ae60; }

/* ── SUBTABS ── */
.subtab-bar {
  background: white; border-bottom: 1px solid #ddd;
  display: flex; padding: 0 20px; gap: 0;
}
.subtab {
  padding: 10px 16px; cursor: pointer; font-size: 12px;
  border-bottom: 3px solid transparent; color: #666;
  transition: all 0.2s; margin-bottom: -1px;
}
.subtab:hover { color: #1a3c6e; }
.subtab.active { color: #1a3c6e; font-weight: bold; border-bottom-color: #1a3c6e; }

/* ── MISC ── */
.empty-state { text-align: center; padding: 60px 20px; color: #aaa; }
.empty-state .ei { font-size: 48px; margin-bottom: 12px; }
.divider { height: 1px; background: #e0e0e0; margin: 16px 0; }
.admin-table-wrap { max-width: 820px; }
.admin-table-wrap table { min-width: 600px; }
.admin-table-wrap th { background: #1a3c6e; color: white; padding: 8px 10px; }
.admin-table-wrap td { padding: 7px 10px; }