/* Auth Screen */
#auth-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-dark); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
.login-box {
    background: var(--bg-card); padding: 40px; border-radius: 8px; border: 1px solid var(--border-color);
    width: 100%; max-width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.login-box svg { height: 60px; margin-bottom: 20px; }
.login-box input { width: 100%; box-sizing: border-box; margin-bottom: 15px; padding: 12px; }

/* Sidebar */
.sidebar { 
    width: 250px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color); 
    display: flex; flex-direction: column; z-index: 10; 
    transition: width 0.3s ease; overflow: hidden;
}
.sidebar.collapsed { width: 60px; }
.sidebar.collapsed .nav-item { font-size: 0; padding: 15px 0; justify-content: center; }
.sidebar.collapsed .nav-category, .sidebar.collapsed h2, .sidebar.collapsed #btn-logout { display: none; }
.sidebar.collapsed #btn-toggle-sidebar { margin: 0 auto; }

.sidebar-header { 
    padding: 20px; display: flex; align-items: center; gap: 15px; 
    border-bottom: 1px solid var(--border-color); 
    background: linear-gradient(90deg, rgba(15, 18, 85, 0.8), rgba(113, 10, 178, 0.2)); 
}
.sidebar-header svg { height: 30px; }
.sidebar-header h2 { margin: 0; font-size: 1.2rem; color: var(--primary-cyan); }
.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.nav-category { 
    padding: 15px 20px 5px 20px; font-size: 0.8em; color: var(--text-light); 
    text-transform: uppercase; letter-spacing: 1px; font-weight: bold; 
}
.nav-item { 
    padding: 10px 20px 10px 30px; cursor: pointer; display: flex; align-items: center; gap: 10px; 
    transition: all 0.2s; border-left: 3px solid transparent; color: var(--text-light);
}
.nav-item:hover { background-color: rgba(63, 213, 255, 0.1); color: var(--text-white); }
.nav-item.active { 
    background: linear-gradient(90deg, rgba(63, 213, 255, 0.15), transparent); 
    border-left: 3px solid var(--primary-cyan); color: var(--primary-cyan); font-weight: bold; 
}
.sidebar-footer { padding: 20px; border-top: 1px solid var(--border-color); display:flex; flex-direction:column; gap:10px; }

/* Main Content */
.main-content { flex: 1; overflow-y: auto; position: relative; height: 100%; }
.topbar { 
    height: 60px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; 
    padding: 0 30px; justify-content: space-between; background: rgba(10, 10, 26, 0.9); 
    position: sticky; top: 0; z-index: 5; 
}
.content-area { padding: 30px; max-width: 1200px; margin: 0 auto; }

/* Cards & Layout */
.card { 
    background-color: var(--bg-card); border-radius: 8px; padding: 25px; margin-bottom: 25px; 
    border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}
.card h2 { 
    margin-top: 0; color: var(--primary-cyan); border-bottom: 1px solid var(--border-color); 
    padding-bottom: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; 
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

/* Form Group Layouts */
.form-group { margin-bottom: 15px; display: flex; flex-direction: column; }
.form-group label { margin-bottom: 5px; color: var(--text-light); font-size: 14px; font-weight: 500;}

/* File Drop Area */
.file-drop-area { 
    border: 2px dashed var(--primary-cyan); border-radius: 8px; padding: 30px; text-align: center; 
    cursor: pointer; background: rgba(63, 213, 255, 0.05); transition: all 0.3s; margin-bottom: 20px; 
    color: var(--text-light);
}
.file-drop-area:hover, .file-drop-area.dragover { background: rgba(63, 213, 255, 0.15); color: var(--text-white);}

/* Doc Preview */
.doc-preview-container { background: white; color: black; padding: 40px; border-radius: 4px; min-height: 800px; position: relative; }
.doc-header { display: flex; justify-content: space-between; margin-bottom: 40px; border-bottom: 2px solid var(--grad-start); padding-bottom: 20px; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.doc-table th, .doc-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
.doc-table th { background-color: #f5f5f5; }
[contenteditable="true"] { padding: 5px; border: 1px dashed #aaa; background: #fff9e6; min-width: 50px; display: inline-block; }
.edit-mode-bar { background: rgba(255, 152, 0, 0.2); border: 1px solid #ff9800; padding: 10px; margin-bottom: 20px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }

@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area { position: absolute; left: 0; top: 0; width: 100%; background: white; }
    .no-print { display: none !important; }
    [contenteditable="true"] { border: none !important; background: transparent !important; padding: 0 !important; }
}