// Styles for Smartisan Notes - Based on React Native version
export default {
  // Common styles - Based on Smartisan Notes design principles
  container: {
    flex: 1,
    backgroundColor: 'var(--background)',
  },
  
  // Header styles - Warm, minimal design
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    backgroundColor: 'var(--background)',
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
  },
  
  headerTitleContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  
  headerTitleTouchable: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: 'var(--text-primary)',
    textAlign: 'center',
  },
  
  headerFolderArrow: {
    width: 20,
    height: 20,
    tintColor: 'var(--text-primary)',
    marginLeft: 8,
  },
  
  headerButton: {
    padding: 8,
  },
  
  headerButtonText: {
    fontSize: 16,
    color: 'var(--primary)',
    fontWeight: '500',
  },
  
  headerActionIcon: {
    width: 24,
    height: 24,
    tintColor: 'var(--primary)',
  },
  
  // Folder list styles
  folderListContainer: {
    position: 'absolute',
    top: 50,
    left: '10%',
    right: '10%',
    backgroundColor: 'var(--background-card)',
    borderRadius: 8,
    shadowColor: 'var(--shadow)',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 3,
    zIndex: 100,
  },
  
  folderListItem: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  
  folderListItemActive: {
    backgroundColor: 'var(--folder-item-selected)',
  },
  
  folderListItemText: {
    fontSize: 16,
    color: 'var(--text-primary)',
  },
  
  folderListItemTextActive: {
    color: 'var(--primary)',
    fontWeight: '500',
  },
  
  folderListItemCount: {
    fontSize: 13,
    color: 'var(--text-tertiary)',
  },
  
  // Note list styles - Clean, paper-like appearance
  noteListContainer: {
    flex: 1,
    backgroundColor: 'var(--background)',
  },
  
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: 'var(--background-card)',
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
  },
  
  searchInputContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'var(--background-card)',
    height: 36,
    paddingHorizontal: 8,
    paddingVertical: 0,
  },
  
  searchInputBackground: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    borderRadius: 4,
    height: 36,
    paddingHorizontal: 8,
    paddingVertical: 0,
  },
  
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: 'var(--text-primary)',
    marginLeft: 8,
    marginRight: 8,
    padding: 0,
    includeFontPadding: false,
  },
  
  searchLeftIcon: {
    width: 20,
    height: 20,
    tintColor: 'var(--text-tertiary)',
  },
  
  searchClearIcon: {
    width: 20,
    height: 20,
    tintColor: 'var(--text-tertiary)',
  },
  
  noteListEmptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    backgroundColor: 'var(--background)',
  },
  
  noteListEmptyText: {
    fontSize: 18,
    fontWeight: '600',
    color: 'var(--text-tertiary)',
    marginBottom: 8,
  },
  
  noteListEmptySubtext: {
    fontSize: 14,
    color: 'var(--text-tertiary)',
    textAlign: 'center',
    lineHeight: 20,
  },
  
  noteCount: {
    fontSize: 13,
    color: 'var(--text-tertiary)',
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  
  // Note item styles - Paper note appearance with subtle shadows
  noteItem: {
    padding: 0,
    borderRadius: 6,
    borderLeftWidth: 1,
    borderLeftColor: 'transparent',
    shadowColor: 'var(--shadow)',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    overflow: 'hidden',
    backgroundColor: 'var(--background-card)',
  },
  
  noteItemDeleteButton: {
    backgroundColor: 'var(--accent-red)',
    justifyContent: 'center',
    alignItems: 'center',
    width: 80,
    height: '100%',
    borderRadius: 6,
    marginBottom: 10,
  },
  
  noteItemDeleteButtonImage: {
    width: 24,
    height: 24,
    tintColor: 'var(--text-inverted)',
  },
  
  noteItemHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 8,
  },
  
  noteItemTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: 'var(--note-title)',
    flex: 1,
    marginRight: 8,
  },
  
  noteItemStar: {
    width: 20,
    height: 20,
    tintColor: 'var(--note-star)',
  },
  
  noteItemContent: {
    fontSize: 14,
    color: 'var(--note-content)',
    marginBottom: 8,
    lineHeight: 20,
    includeFontPadding: false,
  },
  
  noteItemDate: {
    fontSize: 12,
    color: 'var(--note-date)',
    includeFontPadding: false,
  },
  
  // Floating action button - Circular button with warm color
  fab: {
    position: 'absolute',
    bottom: 24,
    right: 24,
    backgroundColor: 'var(--primary)',
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: 'var(--shadow)',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
    elevation: 3,
  },
  
  fabIcon: {
    width: 24,
    height: 24,
    tintColor: 'var(--text-inverted)',
  },
  
  // Folder item styles - Clean list items with folder icon
  folderItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 14,
    paddingHorizontal: 16,
    marginBottom: 1,
    borderLeftWidth: 3,
    borderLeftColor: 'var(--accent-orange)',
    overflow: 'hidden',
    backgroundColor: 'var(--background-card)',
  },
  
  folderItemIcon: {
    width: 24,
    height: 24,
    tintColor: 'var(--folder-name)',
  },
  
  folderItemInfo: {
    flex: 1,
    marginLeft: 12,
  },
  
  folderItemName: {
    fontSize: 16,
    fontWeight: '500',
    color: 'var(--folder-name)',
    marginBottom: 2,
  },
  
  folderItemCount: {
    fontSize: 13,
    color: 'var(--folder-count)',
  },
  
  folderItemArrow: {
    fontSize: 18,
    color: 'var(--text-tertiary)',
  },
  
  // Note editor styles - Clean writing surface
  noteEditorContainer: {
    flex: 1,
    backgroundColor: 'var(--background-card)',
  },
  
  editorToolbar: {
    flexDirection: 'row',
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
    backgroundColor: 'var(--background-card)',
  },
  
  editorToolbarButton: {
    padding: 8,
    marginRight: 8,
  },
  
  editorToolbarIcon: {
    width: 24,
    height: 24,
    tintColor: 'var(--text-primary)',
  },
  
  noteEditorContent: {
    flex: 1,
    padding: 16,
  },
  
  noteEditorTitle: {
    fontSize: 22,
    fontWeight: '600',
    color: 'var(--note-title)',
    marginBottom: 16,
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
  },
  
  noteEditorContentInput: {
    fontSize: 16,
    color: 'var(--note-content)',
    lineHeight: 24,
    flex: 1,
    textAlignVertical: 'top',
  },
  
  // Note detail styles - Clean reading experience
  noteDetailContainer: {
    flex: 1,
    backgroundColor: 'var(--background-card)',
  },
  
  noteDetailContent: {
    flex: 1,
    padding: 16,
  },
  
  noteDetailHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
    paddingVertical: 4,
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
  },
  
  noteDetailDate: {
    fontSize: 13,
    color: 'var(--note-date)',
  },
  
  noteDetailStarIcon: {
    width: 24,
    height: 24,
    tintColor: 'var(--note-star)',
  },
  
  noteDetailContentText: {
    fontSize: 16,
    color: 'var(--note-content)',
    lineHeight: 24,
    includeFontPadding: false,
  },
  
  noteDetailFooter: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingVertical: 12,
    backgroundColor: 'var(--background)',
    borderTopWidth: 1,
    borderTopColor: 'var(--border)',
  },
  
  noteDetailActionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: 'var(--primary)',
    borderRadius: 4,
  },
  
  noteDetailActionButtonText: {
    color: 'var(--text-inverted)',
    fontWeight: '500',
    fontSize: 15,
    marginLeft: 8,
  },
  
  noteDetailActionIcon: {
    width: 20,
    height: 20,
    tintColor: 'var(--text-inverted)',
  },
  
  // Settings styles - Clean, organized sections
  settingsSection: {
    backgroundColor: 'var(--background-card)',
    marginBottom: 12,
  },
  
  settingsSectionTitle: {
    fontSize: 13,
    fontWeight: '600',
    color: 'var(--text-tertiary)',
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: 'var(--background-secondary)',
  },
  
  settingsItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: 'var(--border)',
  },
  
  settingsItemWithIcon: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  
  settingsItemIcon: {
    width: 20,
    height: 20,
    tintColor: 'var(--text-primary)',
    marginRight: 12,
  },
  
  settingsItemText: {
    fontSize: 16,
    color: 'var(--text-primary)',
  },
  
  settingsItemValue: {
    fontSize: 15,
    color: 'var(--text-tertiary)',
  },
  
  // Modal styles - Clean dialogs
  modalContainer: {
    flex: 1,
    backgroundColor: 'var(--black-50)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  
  modalContent: {
    backgroundColor: 'var(--background-card)',
    borderRadius: 8,
    padding: 20,
    width: '80%',
    maxWidth: 300,
  },
  
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: 'var(--text-primary)',
    marginBottom: 16,
    textAlign: 'center',
  },
  
  modalInput: {
    borderWidth: 1,
    borderColor: 'var(--border)',
    borderRadius: 4,
    padding: 12,
    fontSize: 16,
    color: 'var(--text-primary)',
    marginBottom: 16,
  },
  
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  
  modalButton: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
    borderRadius: 4,
  },
  
  modalButtonCancel: {
    backgroundColor: 'var(--background-secondary)',
    marginRight: 8,
  },
  
  modalButtonConfirm: {
    backgroundColor: 'var(--primary)',
    marginLeft: 8,
  },
  
  modalButtonText: {
    fontSize: 16,
    fontWeight: '500',
  },
  
  modalButtonTextCancel: {
    color: 'var(--text-primary)',
  },
  
  modalButtonTextConfirm: {
    color: 'var(--text-inverted)',
  },
  
  // Overlay style for dismissing folder list
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent',
    zIndex: 99,
  },
};