/* wrapper.css - Styles for Modular Workspace Shell (UPDATED) */

/* Load Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
}

/* Floating Action Targets */
.floating-action {
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.floating-action:hover {
    transform: scale(1.05);
}

/* Notebook Area */
.notebook-page {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    line-height: 1.6;
}

/* Modal specific styles */
.modal-overlay {
    transition: opacity 0.3s ease;
}

.modal-content-container {
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #1f2937;
    border-radius: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

@media (min-width: 640px) {
    .modal-content-container {
        height: auto;
        max-height: 90vh;
        border-radius: 1rem;
        margin: 1rem;
    }
}

/* Utility to hide scrollbars */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Message Box/Toast */
#app-message-box {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 200;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    opacity: 0;
    transition: all 0.5s ease-out;
    max-width: 90%;
    text-align: center;
}
#app-message-box.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Progress bar styles (for AI loading modal) */
.progress-bar {
    width: 100%;
    background-color: #374151;
    border-radius: 8px;
    overflow: hidden;
    height: 12px;
}
.progress-bar-inner {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: 8px;
    transition: width 0.3s ease;
}

/* Progress bar animation */
@keyframes fillProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* Pulse animation for recording indicator */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* Soft blink animation for clock status */
@keyframes softBlink {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.6; 
    }
}

/* Finance Entry Form Styles (choice buttons) */
.choice-btn {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    text-align: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    border-width: 2px;
    border-color: #4B5563; 
    background-color: #4B5563;
    color: #FFFFFF;
}
.choice-btn:hover {
    background-color: #4F46E5;
    color: #FFFFFF;
    border-color: #4F46E5;
}
.choice-btn.selected {
    background-color: #6366F1;
    color: #FFFFFF;
    border-color: #6366F1;
}

/* FAB POSITIONING */

/* Bottom Left FAB - Filter */
#filter-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 50;
}

/* Bottom Middle FAB - View Toggle */
#view-toggle-fab {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

/* Middle Top FAB - Clock Status */
#clock-status-fab {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
}

/* Clock status states */
#clock-status-fab.clocked-out {
    background-color: #4B5563; /* gray-600 */
}

#clock-status-fab.clocked-in {
    background-color: #EAB308; /* yellow-500 */
    animation: softBlink 2s infinite;
}

/* Workspace view mode - when showing notes list in main area */
#workspace.view-mode {
    padding: 1rem;
}

#workspace.view-mode .workspace-notes-list {
    display: block;
}

.workspace-notes-list {
    display: none;
}

/* Note tiles in workspace view */
.workspace-note-tile {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.workspace-note-tile:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Responsive adjustments for FABs */
@media (max-width: 640px) {
    #filter-fab,
    #view-toggle-fab {
        width: 56px;
        height: 56px;
    }
    
    #clock-status-fab {
        padding: 0 12px;
        height: 48px;
        font-size: 12px;
    }
    
    #clock-status-fab svg {
        width: 20px;
        height: 20px;
    }
}

/* Line clamp utility (for preview text) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}