:root {
  --navy-dark: #1B2951;
  --gold-primary: #D4AF37;
  --bg-color: #0F172A;
  --card-bg: #1E293B;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --border-color: #334155;
  --accent-blue: #3B82F6;
  --accent-green: #10B981;
  
  /* CRM EXCEL THEME (Forest Green) */
  --crm-green: #1E5631; /* Forest Green */
  --crm-light-green: #4C9A2A;
  --crm-bg: #F0F5F1;
  --crm-header-text: #FFFFFF;
  --crm-border: #C6D5C3;
  --crm-input-bg: #FFF2CC; /* Nền vàng cho ô nhập tay */
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }
body { background-color: var(--bg-color); color: var(--text-primary); display: flex; height: 100vh; overflow: hidden; }

.sidebar { width: 260px; background-color: var(--card-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; padding: 20px 0; }
.logo { padding: 0 20px 20px; border-bottom: 1px solid var(--border-color); font-size: 20px; font-weight: 700; color: white; }
.accent-gold { color: var(--gold-primary); }
.nav-links { list-style: none; margin-top: 20px; }
.nav-links li { padding: 15px 25px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; transition: all 0.3s; }
.nav-links li:hover { background-color: rgba(255,255,255,0.05); color: white; }
.nav-links li.active { border-left: 4px solid var(--gold-primary); background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%); color: var(--gold-primary); }

.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.top-header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); background-color: var(--card-bg); }
.user-profile { display: flex; align-items: center; gap: 15px; }
.sync-status { font-size: 12px; color: var(--accent-green); background: rgba(16, 185, 129, 0.1); padding: 5px 10px; border-radius: 12px; }
.avatar { width: 35px; height: 35px; border-radius: 50%; background-color: var(--gold-primary); color: var(--navy-dark); display: flex; align-items: center; justify-content: center; font-weight: bold; }

.tab-content { display: none; padding: 30px; overflow-y: auto; height: calc(100vh - 80px); }
.tab-content.active { display: block; }

.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { background-color: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-color); box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin-bottom: 20px; max-height: 80vh; overflow: auto; }
.panel h3 { color: var(--gold-primary); margin-bottom: 15px; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 10px; }

/* S&OP Default Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { background-color: rgba(255,255,255,0.05); color: var(--text-secondary); text-align: left; padding: 12px; border-bottom: 2px solid var(--border-color); font-weight: 500; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.data-table tr:hover td { background-color: rgba(255,255,255,0.02); }

/* CRM EXCEL TABLE STYLE */
.excel-panel { background-color: white; border-radius: 4px; padding: 10px; border: 1px solid var(--crm-border); margin-bottom: 20px; overflow: auto; max-height: 80vh; }
.excel-header-title { background-color: var(--crm-green); color: white; padding: 10px 15px; font-size: 18px; font-weight: bold; border-radius: 4px 4px 0 0; display:flex; justify-content:space-between;}
.excel-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #333; }
.excel-table th { background-color: var(--crm-green); color: white; text-align: center; padding: 8px; border: 1px solid #fff; font-weight: 500; }
.excel-table td { padding: 6px 8px; border: 1px solid var(--crm-border); text-align: center; }
.excel-table tbody tr:nth-child(even) { background-color: #f9f9f9; }
.excel-table tbody tr:hover td { background-color: #e6f0e9; }
.excel-input-cell { background-color: var(--crm-input-bg) !important; color: #000; } /* Ô nhập tay */
.excel-readonly-cell { background-color: #f1f1f1 !important; color: #666; } /* Ô Auto */

.btn { padding: 8px 16px; border-radius: 6px; border: none; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.btn-gold { background-color: var(--gold-primary); color: var(--navy-dark); }
.btn-gold:hover { background-color: #ebd475; }
.btn-primary { background-color: rgba(255,255,255,0.1); color: white; border: 1px solid var(--border-color); }
.btn-primary:hover { background-color: rgba(255,255,255,0.15); }

/* KPI Grid */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
.kpi-card { background-color: var(--card-bg); border-radius: 12px; padding: 20px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 20px; }
.kpi-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(212, 175, 55, 0.1); color: var(--gold-primary); }
.kpi-data h3 { font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; font-weight: 400; }
.kpi-data h1 { font-size: 28px; font-weight: 600; color: white; }

.toast { position: fixed; bottom: 20px; right: 20px; background-color: var(--accent-green); color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transform: translateY(100px); opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 1000;}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background-color: #ef4444; }

.input-field { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--border-color); background: rgba(0,0,0,0.2); color: white; border-radius: 6px; }

/* Dashboard CRM style */
.crm-kpi-group { margin-bottom: 20px; }
.crm-kpi-header { background-color: var(--crm-green); color: white; padding: 5px 10px; font-weight: bold; font-size: 13px; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.status-green { background-color: #10B981; }
.status-red { background-color: #ef4444; }
.status-amber { background-color: #f59e0b; }

/* S&OP EXCEL THEME (Navy & Gold) */
.sop-navy:root {
  --sop-navy: #1B2951;
  --sop-gold: #D4AF37;
  --sop-bg: #E8EEF2;
  --sop-border: #9CB2CE;
  --sop-input-bg: #FFF2CC;
  --sop-auto-bg: #E2E8F0;
}

.sop-panel { background-color: white; border-radius: 4px; padding: 10px; border: 1px solid var(--sop-border); margin-bottom: 20px; overflow-x: auto; font-family: 'Outfit', sans-serif;}
.sop-header-title { background-color: var(--navy-dark); color: white; padding: 10px 15px; font-size: 18px; font-weight: bold; border-radius: 4px 4px 0 0; display:flex; justify-content:space-between;}
.sop-table { width: 100%; border-collapse: collapse; font-size: 12px; color: #333; }
.sop-table th { background-color: var(--navy-dark); color: white; text-align: center; padding: 8px; border: 1px solid #fff; font-weight: 500; }
.sop-table td { padding: 6px 8px; border: 1px solid var(--sop-border); text-align: center; }
.sop-table tbody tr:hover td { background-color: #E8EEF2; }
.sop-input-cell { background-color: #FFF2CC !important; color: #000 !important; font-weight: 500;} /* Ô nhập tay */
.sop-readonly-cell { background-color: #E2E8F0 !important; color: #475569 !important; } /* Ô Auto */

.sop-sub-header { background-color: #2E4070; color: white; text-align: left; padding: 6px 15px; font-weight: bold; font-size: 13px; }
.text-gold { color: var(--gold-primary); font-weight: bold; }

/* --- INLINE EDITING --- */
.cell-editable { cursor: pointer; position: relative; }
.cell-editable:hover { background-color: #DBEAFE !important; outline: 2px solid #3B82F6; outline-offset: -2px; }
.sop-table .cell-editable:hover { background-color: #FFF2CC !important; outline: 2px solid #D4AF37; outline-offset: -2px; }
.inline-input {
  width: 100%; border: none; background: #EFF6FF; color: #1e293b;
  font-family: inherit; font-size: inherit; padding: 4px 6px;
  text-align: inherit; outline: 2px solid #3B82F6; border-radius: 2px;
  box-sizing: border-box;
}
.sop-table .inline-input { background: #FFF9E6; outline-color: #D4AF37; }
.btn-inline-del {
  background: none; border: none; color: #cbd5e1; cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 4px; transition: all 0.15s;
}
.btn-inline-del:hover { color: #ef4444; background: #fee2e2; }

/* --- NEW ROW (MS Access ✱ style) --- */
.row-new { background: #f0fdf4 !important; border-bottom: 2px dashed #86efac; }
.sop-table .row-new { background: #fffbeb !important; border-bottom: 2px dashed #D4AF37; }
.new-row-star {
  color: #D4AF37; font-size: 18px; font-weight: bold; text-align: center;
  width: 40px; min-width: 40px;
}
.new-row-cell { padding: 2px !important; }
.new-row-input {
  width: 100%; border: 1px dashed #cbd5e1; background: white; color: #334155;
  font-family: inherit; font-size: 11px; padding: 5px 6px; border-radius: 3px;
  box-sizing: border-box; transition: border-color 0.2s;
}
.new-row-input:focus { border-color: #3B82F6; outline: none; background: #EFF6FF; }
.sop-table .new-row-input:focus { border-color: #D4AF37; background: #FFF9E6; }
.new-row-input::placeholder { color: #94a3b8; font-style: italic; font-size: 10px; }
.new-row-empty { background: #f8fafc !important; }
.btn-new-save {
  background: #10b981; border: none; color: white; cursor: pointer;
  font-size: 12px; padding: 5px 8px; border-radius: 4px; transition: all 0.15s;
}
.btn-new-save:hover { background: #059669; transform: scale(1.1); }


/* --- COL RESIZER --- */
th {
  position: relative;
}
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  height: 100%;
}
.col-resizer:hover, .col-resizer.resizing {
  border-right: 2px solid var(--gold-primary);
}

/* STICKY HEADER */
.sop-table th, .excel-table th, thead th {
  position: sticky !important;
  top: 0;
  z-index: 10;
}
.sop-panel {
  max-height: 80vh;
  overflow-y: auto;
}

/* UNLIMITED TABLE WIDTH */
.data-table, .excel-table, .sop-table {
  width: max-content !important;
  min-width: 100%;
}
.data-table th, .data-table td, 
.excel-table th, .excel-table td, 
.sop-table th, .sop-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sop-panel, .excel-panel {
  overflow-x: auto;
}