khwajai/spreadsheet
0
1:root { 2 --bg-dark: #0f172a; --bg-panel: #1e293b; 3 --accent: #0ea5e9; 4 --border: #334155; --text-main: #f1f5f9; --text-dim: #94a3b8; 5}6[data-theme="light"] {7 --bg-dark: #f8fafc; --bg-panel: #ffffff; 8 --accent: #0284c7; 9 --border: #cbd5e1; --text-main: #0f172a; --text-dim: #475569;10}11 12::-webkit-scrollbar { width: 8px; height: 8px; }13::-webkit-scrollbar-track { background: var(--bg-dark); }14::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }15::-webkit-scrollbar-thumb:hover { background: var(--accent); }16 17* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, sans-serif; }18body { background: var(--bg-dark); color: var(--text-main); height: 100vh; overflow: hidden; display: flex; flex-direction: column; transition: background 0.3s, color 0.3s; }19 20.app-container { display: flex; flex-direction: column; height: 100%; position: relative; }21.main-header { height: 50px; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 50; transition: 0.3s; }22.logo-section { display: flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 700; }23.mobile-menu-btn { display: none; background: transparent; border: none; color: var(--text-main); font-size: 20px; cursor: pointer; }24.tag { background: var(--accent); color: var(--bg-dark); padding: 2px 5px; border-radius: 4px; font-size: 10px; font-weight: bold; letter-spacing: 1px; }25 26.header-tools { display: flex; align-items: center; gap: 15px; }27.icon-btn { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; transition: 0.2s; }28.icon-btn:hover { color: var(--accent); }29.status-indicator { font-size: 12px; color: #10b981; display:flex; align-items:center; } 30.status-dot { display:inline-block; width:8px; height:8px; background:#10b981; border-radius:50%; margin-right:5px; box-shadow: 0 0 5px #10b981; }31 32.workspace { display: flex; flex: 1; height: calc(100vh - 50px); position: relative; overflow: hidden; }33.sidebar { width: 50px; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding-top: 10px; transition: 0.3s; z-index: 45;}34.nav-item { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); cursor: pointer; margin-bottom: 8px; transition: 0.2s; }35.nav-item:hover, .nav-item.active { background: var(--accent); color: white; box-shadow: 0 0 10px rgba(14, 165, 233, 0.4); }36.nav-spacer { flex: 1; }37 38.grid-panel { flex: 1; display: flex; flex-direction: column; background: var(--bg-dark); overflow: hidden; position: relative; transition: margin-right 0.3s ease; }39.grid-panel.shifted { margin-right: 340px; } 40.view-section { display: flex; flex-direction: column; height: 100%; width: 100%; }41.hidden { display: none !important; }42 43/* EXCEL ENGINE */44.excel-ribbon { background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; padding: 5px 10px; gap: 15px; overflow-x: auto; flex-wrap: nowrap; }45.ribbon-group { display: flex; flex-direction: column; border-right: 1px solid var(--border); padding-right: 15px; justify-content: center; align-items: center;}46.ribbon-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; margin-top: 5px; font-weight: 600; text-align: center; }47.ribbon-btn-row { display: flex; gap: 5px; }48 49.tool-btn { background: var(--border); border: none; color: var(--text-main); padding: 5px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: 0.2s; }50.tool-btn:hover { background: var(--accent); color: white; font-weight: 600; }51.tool-btn.success { background: #0ea5e9; color: white; }52 53.formula-bar-container { display: flex; height: 32px; background: var(--bg-panel); border-bottom: 1px solid var(--border); align-items: center; padding: 0 10px; gap: 10px; }54.formula-bar-label { font-family: 'Georgia', serif; font-style: italic; font-weight: bold; color: var(--text-dim); user-select: none; width: 25px; text-align: center; }55#grid-formula-bar { flex: 1; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; color: var(--text-main); outline: none; font-size: 13px; }56#grid-formula-bar:focus { border-color: var(--accent); }57 58.sheet-tabs-container { height: 32px; background: var(--bg-panel); display: flex; align-items: flex-end; padding-left: 10px; overflow-x: auto; white-space: nowrap; }59.sheet-tab { padding: 4px 15px; background: var(--bg-dark); border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; font-size: 11px; margin-right: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 26px; color: var(--text-dim); }60.sheet-tab.active { background: var(--accent); color: white; border-color: var(--accent); font-weight: bold; height: 28px; margin-bottom: -1px; z-index: 2; }61.add-sheet-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); }62 63.spreadsheet-wrapper { flex: 1; overflow: auto; background: var(--bg-dark); }64.spreadsheet { display: grid; gap: 1px; background: var(--border); padding-bottom: 40px; }65.header, .corner { background: var(--bg-panel); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:center; color: var(--text-dim); font-size: 11px; font-weight: bold; padding: 4px; user-select: none; }66.corner { left: 0; z-index: 25; background: var(--bg-panel); border-right: 1px solid var(--accent); cursor: pointer; }67.header:first-child { left: 0; z-index: 25; }68.resizer { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; cursor: col-resize; z-index: 30; }69 70.cell { background: var(--bg-panel); padding: 3px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; min-height: 24px; color: var(--text-main); outline: none; text-align: left; }71.cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 5; }72.cell.selected { background: rgba(14, 165, 233, 0.2) !important; border: 1px solid var(--accent); }73.total-row-highlight { font-weight: bold; border-top: 1px solid var(--accent); }74.status-bar { height: 30px; background: var(--bg-panel); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 15px; font-size: 11px; color: var(--text-dim); }75.stat-spacer { flex: 1; }76 77/* MODALS */78.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(5px); }79.modal { background: var(--bg-panel); width: 400px; max-width: 90%; border-radius: 8px; border: 1px solid var(--accent); box-shadow: 0 0 30px rgba(14, 165, 233, 0.2); overflow: hidden; display: flex; flex-direction: column; }80.modal-header { padding: 15px; background: var(--bg-dark); font-weight: 600; border-bottom: 1px solid var(--border); color: var(--text-main); }81.modal-body { padding: 20px; color: var(--text-dim); font-size: 13px; }82.modal-input { width: 100%; background: var(--bg-dark); border: 1px solid var(--border); padding: 8px; color: var(--text-main); border-radius: 4px; margin-top: 10px; }83.modal-footer { padding: 15px; background: var(--bg-dark); display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); }84 85/* BI STUDIO: DASHBOARD */86.viz-container { display: flex; height: 100%; }87.bi-sidebar { width: 280px; background: var(--bg-panel); border-right: 1px solid var(--border); padding: 15px; display: flex; flex-direction: column; overflow-y: auto; }88.bi-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; margin-bottom: 5px; margin-top: 10px; }89.bi-input { width: 100%; margin-bottom: 5px; }90 91.viz-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-dark); min-width: 300px; }92.viz-select { background: var(--bg-dark); border: 1px solid var(--border); color: var(--text-main); padding: 6px 10px; border-radius: 4px; font-size:12px; }93 94.viz-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-panel); }95.viz-tab-btn { flex: 1; background: transparent; border: none; color: var(--text-dim); padding: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; }96.viz-tab-btn.active { color: var(--accent); border-bottom: 3px solid var(--accent); }97 98/* PERFECT 16:9 PRESENTATION SLIDE - True Absolute Freeform Positioning */99.presentation-board-wrapper { width: 100%; padding: 20px; background: #000; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start;}100[data-theme="light"] .presentation-board-wrapper { background: #e2e8f0; }101 102.presentation-slide { 103 position: relative; /* All charts inside will be strictly absolute */104 width: 100%; max-width: 1200px; aspect-ratio: 16/9; 105 background: var(--bg-panel); box-shadow: 0 10px 30px rgba(0,0,0,0.5);106 overflow: hidden; 107}108 109.dash-card-slide { 110 position: absolute; /* Ensures no flexbox gaps/overlapping bugs */111 background: transparent; border: none;112 transition: outline 0.2s;113}114 115/* Hover-only Controls for Borderless Freeform Charts */116.slide-hover-menu {117 position: absolute; top: 0; left: 0; right: 0; height: 30px;118 background: rgba(14, 165, 233, 0.9); display: flex; justify-content: space-between; align-items: center;119 padding: 0 10px; color: white; font-size: 11px; z-index: 10;120 opacity: 0; transition: opacity 0.2s; cursor: grab;121}122.dash-card-slide:hover .slide-hover-menu { opacity: 1; }123.dash-card-slide:hover { outline: 1px dashed var(--border); z-index: 5;}124 125.chart-wrapper { width: 100%; height: 100%; position: relative; pointer-events: none;} /* Pointer events none ensures easy dragging */126.close-btn { background: transparent; border: none; color: white; cursor: pointer; padding: 4px; transition: 0.2s; }127.close-btn:hover { color: #000; }128 129/* Custom Bottom Right Resizer */130.resize-handle {131 position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; 132 cursor: nwse-resize; color: var(--text-dim); opacity: 0; transition: 0.2s;133 display: flex; align-items: center; justify-content: center; z-index: 10;134}135.dash-card-slide:hover .resize-handle { opacity: 1; }136 137/* SMART PUBLISHER: SINGLE-LINE RIBBON */138.report-toolbar.ribbon { 139 height: auto; background: var(--bg-panel); border-bottom: 1px solid var(--border); 140 display: flex; align-items: center; padding: 5px 10px; gap: 10px; 141 flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;142}143.report-toolbar.ribbon::-webkit-scrollbar { height: 4px; }144.ribbon-btn { background: transparent; border: none; color: var(--text-dim); border-radius: 4px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 13px; }145.ribbon-btn:hover { background: var(--border); color: var(--text-main); }146.tool-divider { width: 1px; height: 24px; background: var(--border); margin: 0 5px; }147 148/* PUBLISHER: STRICT PAGE ALIGNMENT */149.document-canvas-container { 150 flex: 1; overflow-y: auto; overflow-x: hidden; display: block; text-align: center; padding: 30px 20px; background: #cbd5e1; 151}152[data-theme="light"] .document-canvas-container { background: #e2e8f0; }153 154.page-canvas { 155 background: white; color: #0f172a; margin: 0 auto 35px auto; 156 box-shadow: 0 10px 25px rgba(0,0,0,0.2); 157 box-sizing: border-box; outline: none; font-family: 'Segoe UI', system-ui, sans-serif; 158 display: block; 159 text-align: left; position: relative;160 overflow: hidden; 161}162 163.page-canvas.a4-portrait { width: 210mm; height: 297mm; padding: 25mm; font-size: 1.1rem; line-height: 1.7; }164.page-canvas.ppt-slide { width: 1280px; height: 720px; padding: 50px; font-size: 1.5rem; line-height: 1.5; justify-content: center; text-align: center; }165 166.page-canvas h1 { color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px; margin-bottom: 15px; font-weight: 700; font-size: 2.2rem; }167.page-canvas.ppt-slide h1 { font-size: 3.5rem; border: none; margin-bottom: 20px; }168 169.report-chart-wrapper { border: 1px dashed #cbd5e1; padding: 5px; resize: both; overflow: hidden; width: 100%; min-height: 350px; max-width: 100%; border-radius: 8px; position: relative; margin: 15px 0; background: white;}170 171/* COLLAPSIBLE GLASSY AI PANEL */172.ai-panel { 173 position: absolute; right: 0; top: 0; bottom: 0;174 width: 340px; 175 background: rgba(15, 23, 42, 0.45); 176 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);177 border-left: 1px solid rgba(14, 165, 233, 0.3); 178 box-shadow: -10px 0 40px rgba(14, 165, 233, 0.1); 179 display: flex; flex-direction: column; z-index: 40; transition: transform 0.3s ease; 180}181.ai-panel.collapsed { transform: translateX(100%); }182[data-theme="light"] .ai-panel { background: rgba(255, 255, 255, 0.65); border-left: 1px solid rgba(37, 99, 235, 0.3); }183 184.ai-toggle-btn {185 position: absolute; left: -28px; top: 50%; transform: translateY(-50%);186 width: 28px; height: 60px; background: var(--bg-panel); border: 1px solid var(--border);187 border-right: none; border-radius: 8px 0 0 8px; color: var(--accent); cursor: pointer;188 box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 50; display: flex; align-items: center; justify-content: center;189}190 191.ai-header { padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px; }192.chat-box { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 15px; }193.message { display: flex; gap: 10px; max-width: 100%; font-size: 13px; line-height: 1.5; }194.message.user-message { flex-direction: row-reverse; }195.bubble { padding: 10px 14px; border-radius: 12px; }196.system-message .bubble { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: var(--text-main); border-bottom-left-radius: 2px; }197[data-theme="light"] .system-message .bubble { background: white; border: 1px solid #cbd5e1;}198.user-message .bubble { background: var(--accent); color: white; font-weight: 500; border-bottom-right-radius: 2px; }199 200.chat-input-area { padding: 15px; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); display: flex; gap: 8px; }201[data-theme="light"] .chat-input-area { background: rgba(255,255,255,0.5); }202#ai-input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); color: var(--text-main); padding: 10px; border-radius: 8px; resize: none; height: 42px; outline: none; }203[data-theme="light"] #ai-input { background: white; border: 1px solid #cbd5e1; }204#send-btn { width: 42px; background: var(--accent); border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; }205 206/* MOBILE RESPONSIVENESS */207@media (max-width: 768px) {208 .mobile-menu-btn { display: inline-block; margin-right: 10px;}209 .sidebar { position: absolute; left: -100%; top: 0; bottom: 0; z-index: 100; }210 .sidebar.mobile-open { left: 0; }211 .bi-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 250px; }212 .ai-panel { width: 100%; position: fixed; height: 50vh; bottom: 0; top: auto; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); transform: translateY(100%); margin-right: 0;}213 .ai-panel.collapsed { transform: translateY(0); }214 .ai-toggle-btn { top: -28px; left: 50%; transform: translateX(-50%); width: 60px; height: 28px; border-radius: 8px 8px 0 0; border: 1px solid var(--border); border-bottom: none; }215 .grid-panel.shifted { margin-right: 0; }216}217 218/* HARD PRINT MEDIA FOR PUBLISHER */219@media print {220 body { background: white !important; color: black !important; }221 .main-header, .sidebar, .ai-panel, .report-toolbar { display: none !important; }222 .document-canvas-container { padding: 0 !important; background: white !important; overflow: visible !important; display: block !important; }223 .page-canvas { box-shadow: none !important; margin: 0 !important; page-break-after: always !important; display: block !important; max-width: none !important; width: 100% !important; transform: none !important;}224 .page-canvas.a4-portrait { padding: 15mm !important; }225 .page-canvas.ppt-slide { padding: 5% !important; height: 100vh !important; }226 .report-chart-wrapper { border: none !important; resize: none !important; margin: 0 !important; }227}